@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:200,300,400,500,600,700,900&display=swap');



/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */



/* Document

   ========================================================================== */



/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in iOS.

 */



html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}



/* Sections

   ========================================================================== */



/**

 * Remove the margin in all browsers.

 */



body {

  margin: 0;

}



/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */



h1 {

  font-size: 2em;

  margin: 0.67em 0;

}



/* Grouping content

   ========================================================================== */



/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */



hr {

  box-sizing: content-box; /* 1 */

  height: 0; /* 1 */

  overflow: visible; /* 2 */

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */



pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/* Text-level semantics

   ========================================================================== */



/**

 * Remove the gray background on active links in IE 10.

 */



a {

  background-color: transparent;

}



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */



abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  text-decoration: underline dotted; /* 2 */

}



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */



b,

strong {

  font-weight: 600;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */



code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/**

 * Add the correct font size in all browsers.

 */



small {

  font-size: 80%;

}



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */



sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



/* Embedded content

   ========================================================================== */



/**

 * Remove the border on images inside links in IE 10.

 */



img {

  border-style: none;

}



/* Forms

   ========================================================================== */



/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */



button,

input,

optgroup,

select,

textarea {

  font-family: inherit; /* 1 */

  font-size: 100%; /* 1 */

  line-height: 1.15; /* 1 */

  margin: 0; /* 2 */

}



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */



button,

input { /* 1 */

  overflow: visible;

}



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */



button,

select { /* 1 */

  text-transform: none;

}



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */



button,

[type="button"],

[type="reset"],

[type="submit"] {

  -webkit-appearance: button;

}



/**

 * Remove the inner border and padding in Firefox.

 */



button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



/**

 * Restore the focus styles unset by the previous rule.

 */



button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



/**

 * Correct the padding in Firefox.

 */



fieldset {

  padding: 0.35em 0.75em 0.625em;

}



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *    `fieldset` elements in all browsers.

 */



legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding: 0; /* 3 */

  white-space: normal; /* 1 */

}



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */



progress {

  vertical-align: baseline;

}



/**

 * Remove the default vertical scrollbar in IE 10+.

 */



textarea {

  overflow: auto;

}



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */



[type="checkbox"],

[type="radio"] {

  box-sizing: border-box; /* 1 */

  padding: 0; /* 2 */

}



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */



[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

  height: auto;

}



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */



[type="search"] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */



[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */



::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}



/* Interactive

   ========================================================================== */



/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */



details {

  display: block;

}



/*

 * Add the correct display in all browsers.

 */



summary {

  display: list-item;

}



/* Misc

   ========================================================================== */



/**

 * Add the correct display in IE 10+.

 */



template {

  display: none;

}



/**

 * Add the correct display in IE 10.

 */



[hidden] {

  display: none;

}

/*end normalize*/



html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}

audio:not([controls]){display:none;height:0}[hidden],template{display:none}

a{background-color:transparent;-webkit-text-decoration-skip:objects}

a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

dfn{font-style:italic}mark{background:#ff0;color:#000}

small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}

code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}

button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}

button,input{overflow:visible}button,select{text-transform:none}

button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}

fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}

legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}

[type=checkbox],[type=radio]{padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-input-placeholder{color:inherit;opacity:0.54}

::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

/* End extract */









html,body{

	font-family: "Noto Sans TC", Arial, sans-serif;

	font-weight: 300;

	font-size:16px;

	line-height:1.7;

	 position: relative;

	}

html{

	overflow-x:hidden

	}

body {

	transition: background-color .5s;

}





:root {

	--main-color:#E06428;/*橘*/

	--main-colorLight:#e98f63;

	--main-colorDark:#c9561d;

	--main-width:1100px;

}

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

	:root {

	--main-width:90%;

}	

	}

a {

	color:#333;

}

a:hover {

	color:#E06428;

}





header {

	width:var(--main-width);

	margin:auto;

	border-bottom:solid 2px var(--main-color);

	padding:15px 0;

	display: flex;

	font-size:20px;

	line-height:40px;

	color:#676767;

}

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

	header {

	width:100%;

	}

}



.logo {

	border-right:solid 1px #B0B0B0;

	padding-right:20px;

	margin-right:20px;

}

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

	.logo {

	padding-left:20px;

}

}

.logo img {

	height:40px;

	display:block;

	padding:0;

	margin:0;

}

main {

	width:var(--main-width);

	margin:auto;

	min-height:700px;

	padding-bottom:60px;

}

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

	main {

	min-height:600px;

}

}



.brand-list {

	display:flex;

	flex-wrap: wrap;

	width:100%;

	padding:40px 0;

}

.brand-box {

	width:17%;

	margin:30px 1.5%;

}

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

	.brand-box {

	width:21%;

	margin:20px 2%;

}

}

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

	.brand-box {

	width:29%;

	margin:20px 2%;

}

}

.aspect-ratio {

  width: 100%;

  padding-top: 100%; 

  position: relative; 

  border:solid 1px #cacaca;

}

.aspect-ratio img {

	width:100%;

	height:100%;

	object-fit: contain;

	position:  absolute;

   top: 0;

   left: 0;

   bottom: 0;

   right: 0;

   text-align: center;

   display:block;

   padding:10px;

}

footer {

	background-color:#000;

	color:#c3c3c3;

	font-size:13px;

	text-align:center;

	padding:20px 10px;

}

footer a {

	display:inline-block;

	color:#c3c3c3;

	text-decoration:none;

}

footer a:hover {

	color:#fff;

}



.news-header,

.news-list-box,

.news-content {

  width:85%;

  margin:auto;

}

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

	.news-header,

.news-list-box,

.news-content {

  width:100%;

  margin:auto;

}

}

.news-header {

	display: grid;

  justify-content: space-between;

  grid-template-columns: 150px auto;

  padding:20px 0;

}

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

	.news-header {

	display: block;

}

.brand-logo {

	text-align:center;

}

}

.brand-logo img {

	width:auto;

	height:60px;

}



.news-search {

	text-align:right;

	padding-top:10px;

}

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

	.news-search {

	text-align:center;

	padding-top:10px;

}

}

.news-search input[type=text] {

	border:solid 1px #BBBBBB;

	border-radius:5px;

	padding:2px 8px;

	outline:none;

}

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

	.news-search input[type=text] {

		width:75%

	}

}

.news-search input[type=text]:focus {

	border:solid 1px var(--main-color);

}

.news-search input[type=button] {

	border:solid 1px var(--main-colorDarker);

	border-radius:5px;

	padding:2px 15px;

	background-color:var(--main-color);

	color:#fff;

	margin-left:5px;

	cursor:pointer;

}

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

	.news-search input[type=button] {

	width:23%;

	text-align:center;

	padding:2px 0;

}

}

.news-list-box {

	display:block;

	border-radius:8px;

	border:solid 1px #d6d6d6;

	padding:20px 30px;

	margin:15px auto;

	color:#777777;

}

.news-list-box:hover {

	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.15);

}

.news-list-box a {

	color:#777777;

	text-decoration:none;

}



.news-list-box h2 {

	font-size:20px;

	color:#000;

	margin:0 0 10px;

}

.news-list-box .date {

	font-size:13px;

	color:#A0A0A0;

	padding-top:10px;

}



.news-content {

	padding: 40px 80px;

    border: solid 1px #cecece;

    border-radius: 8px;

}

.news-content figure,
.news-content img{

	max-width: 100% !important;
	height: auto !important;
	width: auto !important;

}

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

	.news-content {

	padding: 30px 20px;

}

}

.news-content h1 {

	font-size:24px;

	colot:#000;

	margin:0 0 20px;

}

.news-content .date {

	font-size:13px;

	color:#A0A0A0;

}

.news-content img,

.news-content table {

	max-width:100%;

	height:auto;

}



.nav-link {

	display:block;

	text-align:center;

	padding:30px 0;

}

.nav-link a {

	color:var(--main-color);

	text-decoration:none;

	padding:8px 20px;

	border-radius:8px;

}

.nav-link a:hover {

	background-color:#f1f1f1;

}