@charset "UTF-8";
/*----------reset css-----------*/
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

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

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

img { border: 0; max-width: 100%; vertical-align: middle; height: auto; }

iframe { max-width: 100%; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="text"]:focus { outline: none; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

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

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

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

textarea { overflow: auto; }

textarea:focus { outline: none; }

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

td, th { padding: 0; }

ul, ol, dl, h1, h2, h3, h4, h5, h6, p, figure { padding: 0; margin: 0; }

textarea { resize: none; }

*:focus { outline: none; }

/*-------------------Winnie basic scss---------------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-word; }

a { text-decoration: none; color: inherit; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
.slick-track, .slick-list{transition: initial;}
a:active, a:focus { text-decoration: none; }

::-webkit-input-placeholder { color: #999; }

::-moz-placeholder { color: #999; opacity: 1; }

/* firefox 19+ */
:-ms-input-placeholder { color: #999; opacity: 1; }

/* ie */
input:-moz-placeholder { color: #999; }

input, button { outline: none; }

h1, h2, h3 { font-size: inherit; font-weight: inherit; }

.greencolor { color: #49a984; }

.f14 { font-size: 14px; }

.f20 { font-size: 20px; }

.f30 { font-size: 30px; }

.f36 { font-size: 36px; }

.f50 { font-size: 50px; }

::-webkit-scrollbar { background-color: transparent; width: 10px; height: 10px; }

/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track { background-color: transparent; }

::-webkit-scrollbar-track:hover { background-color: #f4f4f4; }

/* scrollbar itself */
::-webkit-scrollbar-thumb { background-color: #333; }

::-webkit-scrollbar-thumb:hover { background-color: #a0a0a5; }

/*反白文字*/
::selection { background: #00ab83; color: #fff; }

::-moz-selection { background: #00ab83; color: #fff; }

.btnstyle { display: inline-block; padding: 15px 60px; text-align: center; font-size: 1rem; color: #fff; background: #181818; border: none; }
.btnstyle:hover { opacity: 0.9; -webkit-transform: scale(0.9); transform: scale(0.9); }

.linkstyle { text-decoration: underline; color: #00ab83; }

a.thover1 { background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000000 50%); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; }
a.thover1:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; }
a.thover1:hover { background-position: 0; }
a.thover1:hover:before { width: 100%; }

.main_title { font-size: 3.75rem; font-weight: 700; color: #333; text-align: center; }

@media (max-width: 768px) { .main_title { font-size: 2.5rem; } }
.sub_title { font-size: 1.5rem; font-weight: 400; text-align: center; color: #333; }

@media (max-width: 768px) { .sub_title { font-size: 1.375rem; } }
.content { font-size: 1.125rem; line-height: calc(30/18); }

.p_title { font-size: 1.25rem; margin-bottom: 10px; }

.p_con { font-size: 1.125rem; margin-bottom: 10px; }

.backpre { text-align: center; }

.vefify { display: flex; flex-wrap: wrap; justify-content: center; }

.inputstyle { border: none; padding: 5px 0; font-size: 18px; background: none; width: 100%; }
.inputstyle.w150 { width: 150px; }
.inputstyle.w200 { width: 200px; }
.inputstyle.textareastyle { height: 80px; }
.inputstyle[disabled="disabled"] { background-color: #eee; border: none; }

.filestyle { border-radius: 3px; padding: 7px 10px; background: #ddd; }

table { table-layout: fixed; }

.listystyle { padding-left: 20px; }
.listystyle li { margin-bottom: 10px; }

.video-container { position: relative; padding-bottom: 53.8%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.googlemap-container { position: relative; padding-bottom: 25%; padding-top: 30px; height: 0; overflow: hidden; }

.googlemap-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.clearfloat { clear: both; height: 0; line-height: 0px; }

.floatleft { float: left; }

.floatright { float: right; }

.textEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; display: block; }

.vermid { vertical-align: middle; display: inline-block; }

.vertop { vertical-align: top; }

.textalignrigh { text-align: right; }

.textaligncenter { text-align: center; }

.textunderline { text-decoration: underline; }

.texthidden { display: block; overflow: hidden; width: 0; height: 0; }

.verticaltop { vertical-align: top; }

.textleft { text-align: left; }

/*元素垂直置中*/
/*會由後台上稿的圖片*/
/*-------------------unrest css-----------------*/
.unreset { font-size: 16px; letter-spacing: 1.8px; line-height: 1.7; }
.unreset li { display: list-item; }
.unreset head { display: none; }
.unreset col { display: table-column; }
.unreset colgroup { display: table-column-group; }
.unreset td, .unreset th { display: table-cell; }
.unreset caption { display: table-caption; text-align: center; }
.unreset th { font-weight: bold; text-align: center; }
.unreset body { margin: 8px; }
.unreset address, .unreset blockquote, .unreset dd, .unreset div, .unreset dl, .unreset dt, .unreset fieldset, .unreset form, .unreset frame, .unreset frameset, .unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset noframes, .unreset ol, .unreset p, .unreset ul, .unreset center, .unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block; }
.unreset h1 { font-size: 2em; margin: 0.67em 0; }
.unreset h2 { font-size: 1.5em; margin: 0.75em 0; }
.unreset h3 { font-size: 1.17em; margin: 0.83em 0; }
.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu { margin: 1.12em 0; }
.unreset h5 { font-size: .83em; margin: 1.5em 0; }
.unreset h6 { font-size: .75em; margin: 1.67em 0; }
.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong { font-weight: bolder; }
.unreset blockquote { margin-left: 40px; margin-right: 40px; }
.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address { font-style: italic; }
.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp { font-family: monospace; }
.unreset pre { white-space: pre; }
.unreset button, .unreset textarea, .unreset input, .unreset select { display: inline-block; }
.unreset big { font-size: 1.17em; }
.unreset small, .unreset .unreset sub, .unreset .unreset sup { font-size: 0.83em; }
.unreset sub { vertical-align: sub; }
.unreset sup { vertical-align: super; }
.unreset s, .unreset strike, .unreset del { text-decoration: line-through; }
.unreset hr { border: 1px inset; }
.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd { margin-left: 40px; }
.unreset ol, .unreset ol li { list-style-type: decimal; }
.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0; }
.unreset ul, .unreset ul li { list-style-type: disc; }
.unreset u, .unreset ins { text-decoration: underline; }
.unreset br:before { content: "\A"; white-space: pre-line; }
.unreset center { text-align: center; }
.unreset:link, .unreset:visited { text-decoration: underline; }
.unreset:focus { outline: thin dotted invert; }
.unreset img { max-width: 100%; height: initial !important; }
.unreset iframe { max-width: 100%; }
.unreset .embeddedContent { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.unreset .embeddedContent iframe, .unreset .embeddedContent object, .unreset .embeddedContent embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.unreset a { color: #0066ff; }

.unreset table { background-color: transparent; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; }
.unreset th { text-align: left; }
.unreset .dcf-txt-center { text-align: center !important; }
.unreset .dcf-txt-left { text-align: left !important; }
.unreset .dcf-txt-right { text-align: right !important; }
.unreset .dcf-table caption { color: var(--caption); font-size: 1.13em; font-weight: 700; padding-bottom: 0.56rem; }
.unreset .dcf-table thead { font-size: 0.84em; }
.unreset .dcf-table tbody { border-bottom: 1px solid var(--b-table); border-top: 1px solid var(--b-table); font-size: 0.84em; }
.unreset .dcf-table tfoot { font-size: 0.84em; }
.unreset .dcf-table td, .unreset .dcf-table th { padding-right: 1.78em; }
.unreset .dcf-table-bordered, .unreset .dcf-table-bordered td, .unreset .dcf-table-bordered th { border: 1px solid var(--b-table); }
.unreset .dcf-table-bordered td, .unreset .dcf-table-bordered th, .unreset .dcf-table-striped td, .unreset .dcf-table-striped th { padding-left: 1em; padding-right: 1em; }
.unreset .dcf-table-bordered tr:not(:last-child), .unreset .dcf-table-striped tr:not(:last-child) { border-bottom: 1px solid var(--b-table); }
.unreset .dcf-table-striped tbody tr:nth-of-type(2n) { background-color: var(--bg-table-stripe); }
.unreset .dcf-table thead td, .unreset .dcf-table thead th { padding-bottom: .75em; vertical-align: bottom; }
.unreset .dcf-table tbody td, .unreset .dcf-table tbody th, .unreset .dcf-table tfoot td, .unreset .dcf-table tfoot th { padding-top: .75em; vertical-align: top; }
.unreset .dcf-table tbody td, .unreset .dcf-table tbody th { padding-bottom: 0.75em; }
.unreset .dcf-table-bordered thead th { padding-top: 1.33em; }
.unreset .dcf-wrapper-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; left: 50%; margin-left: -50vw; margin-right: -50vw; padding-bottom: 1em; position: relative; right: 50%; width: 100vw; }
.unreset .dcf-overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

.oembed-provider-youtube { position: relative; padding-bottom: 56.25%; /* padding-top: 30px; */ height: 0; overflow: hidden; }

.oembed-provider-youtube iframe, .oembed-provider-youtube object, .oembed-provider-youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-width: 42.09em) { .unreset .dcf-table-responsive thead { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap; }
  .unreset .dcf-table-responsive tr { display: block; }
  .unreset .dcf-table-responsive td { -webkit-column-gap: 3.16vw; -moz-column-gap: 3.16vw; column-gap: 3.16vw; display: grid; grid-template-columns: 1fr 2fr; text-align: left !important; }
  .unreset .dcf-table-responsive.dcf-table-bordered, .unreset .dcf-table-responsive.dcf-table-bordered thead th { border-width: 0; }
  .unreset .dcf-table-responsive.dcf-table-bordered tbody td { border-top-width: 0; }
  .unreset .dcf-table-responsive:not(.dcf-table-bordered) tbody tr { padding-bottom: 0.75em; }
  .unreset .dcf-table-responsive:not(.dcf-table-bordered) tbody td { padding-bottom: 0; }
  .unreset .dcf-table-responsive:not(.dcf-table-bordered):not(.dcf-table-striped) tbody td { padding-right: 0; }
  .unreset .dcf-table-responsive.dcf-table-bordered tbody tr:last-child td:last-child { border-bottom-width: 0; }
  .unreset .dcf-table-responsive tbody td:before { content: attr(data-label); float: left; font-weight: 700; padding-right: 1.78em; } }
/*----------reset css-----------*/
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

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

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

img { border: 0; max-width: 100%; vertical-align: middle; height: auto; }

iframe { max-width: 100%; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="text"]:focus { outline: none; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

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

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

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

textarea { overflow: auto; }

textarea:focus { outline: none; }

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

td, th { padding: 0; }

ul, ol, dl, h1, h2, h3, h4, h5, h6, p, figure { padding: 0; margin: 0; }

textarea { resize: none; }

*:focus { outline: none; }

/*-------------------Winnie basic scss---------------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-word; }

a { text-decoration: none; color: inherit; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }

a:active, a:focus { text-decoration: none; }

::-webkit-input-placeholder { color: #999; }

::-moz-placeholder { color: #999; opacity: 1; }

/* firefox 19+ */
:-ms-input-placeholder { color: #999; opacity: 1; }

/* ie */
input:-moz-placeholder { color: #999; }

input, button { outline: none; }

h1, h2, h3 { font-size: inherit; font-weight: inherit; }

.greencolor { color: #49a984; }

.f14 { font-size: 14px; }

.f20 { font-size: 20px; }

.f30 { font-size: 30px; }

.f36 { font-size: 36px; }

.f50 { font-size: 50px; }

::-webkit-scrollbar { background-color: transparent; width: 10px; height: 10px; }

/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track { background-color: transparent; }

::-webkit-scrollbar-track:hover { background-color: #f4f4f4; }

/* scrollbar itself */
::-webkit-scrollbar-thumb { background-color: #333; }

::-webkit-scrollbar-thumb:hover { background-color: #a0a0a5; }

/*反白文字*/
::selection { background: #00ab83; color: #fff; }

::-moz-selection { background: #00ab83; color: #fff; }

.btnstyle { display: inline-block; padding: 15px 60px; text-align: center; font-size: 1rem; color: #fff; background: #181818; border: none; }

.btnstyle:hover { opacity: 0.9; -webkit-transform: scale(0.9); transform: scale(0.9); }

.linkstyle { text-decoration: underline; color: #00ab83; }

a.thover1 { background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000000 50%); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; }

a.thover1:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; }

a.thover1:hover { background-position: 0; }

a.thover1:hover:before { width: 100%; }

.main_title { font-size: 3.75rem; font-weight: 700; color: #333; text-align: center; }

@media (max-width: 768px) { .main_title { font-size: 2.5rem; } }
.sub_title { font-size: 1.5rem; font-weight: 400; text-align: center; color: #333; }

@media (max-width: 768px) { .sub_title { font-size: 1.375rem; } }
.content { font-size: 1.125rem; line-height: calc(30/18); }

.p_title { font-size: 1.25rem; margin-bottom: 10px; }

.p_con { font-size: 1.125rem; margin-bottom: 10px; }

.backpre { text-align: center; }

.vefify { display: flex; flex-wrap: wrap; justify-content: center; }

.inputstyle { border: none; padding: 5px 0; font-size: 18px; background: none; width: 100%; }

.inputstyle.w150 { width: 150px; }

.inputstyle.w200 { width: 200px; }

.inputstyle.textareastyle { height: 80px; }

.inputstyle[disabled="disabled"] { background-color: #eee; border: none; }

.filestyle { border-radius: 3px; padding: 7px 10px; background: #ddd; }

table { table-layout: fixed; }

.listystyle { padding-left: 20px; }

.listystyle li { margin-bottom: 10px; }

.video-container { position: relative; padding-bottom: 53.8%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.googlemap-container { position: relative; padding-bottom: 25%; padding-top: 30px; height: 0; overflow: hidden; }

.googlemap-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.clearfloat { clear: both; height: 0; line-height: 0px; }

.floatleft { float: left; }

.floatright { float: right; }

.textEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; display: block; }

.vermid { vertical-align: middle; display: inline-block; }

.vertop { vertical-align: top; }

.textalignrigh { text-align: right; }

.textaligncenter { text-align: center; }

.textunderline { text-decoration: underline; }

.texthidden { display: block; overflow: hidden; width: 0; height: 0; }

.verticaltop { vertical-align: top; }

.textleft { text-align: left; }

/*元素垂直置中*/
/*會由後台上稿的圖片*/
/*-------------------unrest css-----------------*/
.unreset { font-size: 16px; letter-spacing: 1.8px; line-height: 1.7; }

.unreset li { display: list-item; }

.unreset head { display: none; }

.unreset col { display: table-column; }

.unreset colgroup { display: table-column-group; }

.unreset td, .unreset th { display: table-cell; }

.unreset caption { display: table-caption; text-align: center; }

.unreset th { font-weight: bold; text-align: center; }

.unreset body { margin: 8px; }

.unreset address, .unreset blockquote, .unreset dd, .unreset div, .unreset dl, .unreset dt, .unreset fieldset, .unreset form, .unreset frame, .unreset frameset, .unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset noframes, .unreset ol, .unreset p, .unreset ul, .unreset center, .unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block; }

.unreset h1 { font-size: 2em; margin: 0.67em 0; }

.unreset h2 { font-size: 1.5em; margin: 0.75em 0; }

.unreset h3 { font-size: 1.17em; margin: 0.83em 0; }

.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu { margin: 1.12em 0; }

.unreset h5 { font-size: .83em; margin: 1.5em 0; }

.unreset h6 { font-size: .75em; margin: 1.67em 0; }

.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong { font-weight: bolder; }

.unreset blockquote { margin-left: 40px; margin-right: 40px; }

.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address { font-style: italic; }

.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp { font-family: monospace; }

.unreset pre { white-space: pre; }

.unreset button, .unreset textarea, .unreset input, .unreset select { display: inline-block; }

.unreset big { font-size: 1.17em; }

.unreset small, .unreset .unreset sub, .unreset .unreset sup { font-size: 0.83em; }

.unreset sub { vertical-align: sub; }

.unreset sup { vertical-align: super; }

.unreset s, .unreset strike, .unreset del { text-decoration: line-through; }

.unreset hr { border: 1px inset; }

.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd { margin-left: 40px; }

.unreset ol, .unreset ol li { list-style-type: decimal; }

.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0; }

.unreset ul, .unreset ul li { list-style-type: disc; }

.unreset u, .unreset ins { text-decoration: underline; }

.unreset br:before { content: "\A"; white-space: pre-line; }

.unreset center { text-align: center; }

.unreset:link, .unreset:visited { text-decoration: underline; }

.unreset:focus { outline: thin dotted invert; }

.unreset img { max-width: 100%; height: initial !important; }

.unreset iframe { max-width: 100%; }

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

.unreset .embeddedContent iframe, .unreset .embeddedContent object, .unreset .embeddedContent embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.unreset a { color: #0066ff; }

.unreset table { background-color: transparent; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; }

.unreset th { text-align: left; }

.unreset .dcf-txt-center { text-align: center !important; }

.unreset .dcf-txt-left { text-align: left !important; }

.unreset .dcf-txt-right { text-align: right !important; }

.unreset .dcf-table caption { color: var(--caption); font-size: 1.13em; font-weight: 700; padding-bottom: 0.56rem; }

.unreset .dcf-table thead { font-size: 0.84em; }

.unreset .dcf-table tbody { border-bottom: 1px solid var(--b-table); border-top: 1px solid var(--b-table); font-size: 0.84em; }

.unreset .dcf-table tfoot { font-size: 0.84em; }

.unreset .dcf-table td, .unreset .dcf-table th { padding-right: 1.78em; }

.unreset .dcf-table-bordered, .unreset .dcf-table-bordered td, .unreset .dcf-table-bordered th { border: 1px solid var(--b-table); }

.unreset .dcf-table-bordered td, .unreset .dcf-table-bordered th, .unreset .dcf-table-striped td, .unreset .dcf-table-striped th { padding-left: 1em; padding-right: 1em; }

.unreset .dcf-table-bordered tr:not(:last-child), .unreset .dcf-table-striped tr:not(:last-child) { border-bottom: 1px solid var(--b-table); }

.unreset .dcf-table-striped tbody tr:nth-of-type(2n) { background-color: var(--bg-table-stripe); }

.unreset .dcf-table thead td, .unreset .dcf-table thead th { padding-bottom: .75em; vertical-align: bottom; }

.unreset .dcf-table tbody td, .unreset .dcf-table tbody th, .unreset .dcf-table tfoot td, .unreset .dcf-table tfoot th { padding-top: .75em; vertical-align: top; }

.unreset .dcf-table tbody td, .unreset .dcf-table tbody th { padding-bottom: 0.75em; }

.unreset .dcf-table-bordered thead th { padding-top: 1.33em; }

.unreset .dcf-wrapper-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; left: 50%; margin-left: -50vw; margin-right: -50vw; padding-bottom: 1em; position: relative; right: 50%; width: 100vw; }

.unreset .dcf-overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

.oembed-provider-youtube { position: relative; padding-bottom: 56.25%; /* padding-top: 30px; */ height: 0; overflow: hidden; }

.oembed-provider-youtube iframe, .oembed-provider-youtube object, .oembed-provider-youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-width: 42.09em) { .unreset .dcf-table-responsive thead { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap; }
  .unreset .dcf-table-responsive tr { display: block; }
  .unreset .dcf-table-responsive td { -webkit-column-gap: 3.16vw; -moz-column-gap: 3.16vw; column-gap: 3.16vw; display: grid; grid-template-columns: 1fr 2fr; text-align: left !important; }
  .unreset .dcf-table-responsive.dcf-table-bordered, .unreset .dcf-table-responsive.dcf-table-bordered thead th { border-width: 0; }
  .unreset .dcf-table-responsive.dcf-table-bordered tbody td { border-top-width: 0; }
  .unreset .dcf-table-responsive:not(.dcf-table-bordered) tbody tr { padding-bottom: 0.75em; }
  .unreset .dcf-table-responsive:not(.dcf-table-bordered) tbody td { padding-bottom: 0; }
  .unreset .dcf-table-responsive:not(.dcf-table-bordered):not(.dcf-table-striped) tbody td { padding-right: 0; }
  .unreset .dcf-table-responsive.dcf-table-bordered tbody tr:last-child td:last-child { border-bottom-width: 0; }
  .unreset .dcf-table-responsive tbody td:before { content: attr(data-label); float: left; font-weight: 700; padding-right: 1.78em; } }
/*如果有載入字型用這段*/
html { position: relative; font-size: 100%; }

html * { transition: 0.3s; position: relative; }

body { color: #000; font-size: 16px; font-family: "Open Sans", Microsoft JhengHei, PMingLiU, Arial, sans-serif, "FontAwesome"; line-height: 1.6; width: 100%; min-width: 360px; margin: 0 auto; position: relative; overflow-x: hidden; letter-spacing: 0.03em; min-height: 100vh; }

@media (max-width: 320px) { body { overflow-x: auto; } }
.wrapper { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }

@media (max-width: 480px) { .wrapper { padding: 0 15px; } }
.showMenu { display: none; cursor: pointer; right: 15px; position: absolute; top: 15px; height: 30px; width: 30px; }

.showMenu span { background: #222; position: absolute; height: 2px; width: 30px; }

.showMenu span:nth-child(1) { top: 0; }

.showMenu span:nth-child(2) { top: 10px; }

.showMenu span:nth-child(3) { top: 20px; }

#btn { position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; background: none; border-radius: 50%; border: none; outline: none; }

#btn span { position: absolute; width: 30px; height: 2px; top: 50%; left: 50%; background: #222; border-radius: 2px; overflow: hidden; transition: all 0.3s linear; }

#btn span::before { content: ""; position: absolute; width: 0; height: 100%; top: 0; right: 0; background: gray; transition: all 0.3s linear; }

#btn span:nth-child(1) { animation: span-first-off 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn span:nth-child(2) { animation: span-second-off 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn span:nth-child(3) { animation: span-third-off 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn.on:hover span::before { width: 100%; transition: all 0.3s linear; }

#btn.on span:nth-child(1) { animation: span-first-on 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn.on span:nth-child(2) { animation: span-second-on 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn.on span:nth-child(3) { animation: span-third-on 0.5s ease-in-out; animation-fill-mode: forwards; }

@keyframes span-first-on { 0% { transform: translate(-50%, -300%); }
  30% { transform: translate(-50%, -50%); }
  100% { transform: translate(-50%, -50%) rotate(-45deg); } }
@keyframes span-first-off { 0% { transform: translate(-50%, -50%) rotate(-45deg); }
  30% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -500%); } }
@keyframes span-second-on { 0% { transform: translate(-50%, -50%); }
  25% { background: gray; }
  50% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-150%, -50%) scale(0); } }
@keyframes span-second-off { 0% { transform: translate(-150%, -50%) scale(0); }
  25% { background: gray; }
  50% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, 0%); } }
@keyframes span-third-on { 0% { transform: translate(-50%, 200%); }
  30% { transform: translate(-50%, -50%); }
  100% { transform: translate(-50%, -50%) rotate(45deg); } }
@keyframes span-third-off { 0% { transform: translate(-50%, -50%) rotate(45deg); }
  30% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, 500%); } }
.header1 {position: fixed;top: 0;width: 100%;z-index: 99;border-bottom: 1px solid #ddd;background-color: #fff;min-width: 360px;}

.header1 .wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }

.header1 .headertop {padding: 5px 15px 5px 0px;flex: 1;}

.header1 .headertop .logo {height: 100%;}

.header1 .headertop .logo a {height: 100%;display: block;}

.header1 .headertop .logo a .icon { height: 100%; display: flex; align-items: center; }

.header1 .headertop .logo a .icon img {max-height: 60px;max-width: 100%;}

.header1 nav.menu { padding: 0; height: 88px; }

.header1 nav.menu ul li { list-style: none; }

.header1 nav.menu > ul { display: flex; flex-wrap: wrap; }

.header1 nav.menu > ul > li { font-size: 18px; max-width: 150px; margin: 0 20px; padding: 30px 0; }

.header1 nav.menu > ul > li:hover .submenu { opacity: 1; visibility: visible; }

.header1 nav.menu > ul > li:first-child { margin-left: 0; }

.header1 nav.menu > ul > li:last-child { margin-right: 0; }

.header1 nav.menu > ul > li:nth-child(n+7) { display: none; }

.header1 nav.menu > ul > li:last-child { display: block; }

.header1 nav.menu > ul > li .firstmenu > a.menutxt { width: 100%; padding-bottom: 15px; }

.header1 nav.menu > ul > li .firstmenu > a.menutxt.active { font-weight: bold; }

.header1 nav.menu > ul > li .firstmenu > a.opensublink { display: none; }

.header1 nav.menu > ul > li .submenu { position: absolute; padding: 10px; width: 180px; left: 50%; top: 84px; transform: translate(-50%, 0); opacity: 0; visibility: hidden; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); }

.header1.header2 nav.menu > ul > li .submenu { top: 70px; }

.header1 nav.menu > ul > li .submenu > ul > li { font-size: 16px; padding: 8px 0; text-align: center; }

.header1 nav.menu > ul > li .submenu > ul > li:last-child { border-bottom: none; }

.header1 nav.menu > ul > li .submenu > ul > li > a { display: inline-block; width: 100%; }

.header1 nav.menu > ul > li .submenu > ul > li > a:hover { transform: scale(1.05); opacity: 0.8; }

@media (min-width: 1101px) { .header1 nav.menu { display: block !important; } }
@media (max-width: 1100px) { .header1 .headertop { padding: 10px; width: 100%; }
  .header1 .wrapper { padding: 0; }
  .showMenu { display: block; }
  .header1 .headertop .logo {display: block;width: calc(100% - 50px);}
  .header1 .headertop .logo a { display: inline-block; }
  .header1 .headertop .logo a .icon img {max-height: 44px;}
  .header1 .headertop .logo a .icon { display: block; }
  .header1 nav.menu { display: none; padding: 15px 10px 5px 10px; overflow: auto; width: 100%; border-top: 1px solid #ddd; height: calc(100vh - 58px); }
  .header1 nav.menu::-webkit-scrollbar { width: 5px; height: 5px; }
  .header1 nav.menu > ul li { padding: 10px 0; width: 100%; max-width: 100%; text-align: center; margin: 0; }
  .header1 nav.menu > ul > li { border-bottom: 1px dotted #ccc; font-size: 18px; }
  .header1 nav.menu > ul > li .submenu { position: relative; padding: 10px; width: 100%; left: initial; top: initial; transform: initial; opacity: 1; visibility: initial; display: none; box-shadow: none; font-weight: 100; }
  .header1.header2 nav.menu > ul > li .submenu{
    top: 0;
  }
  .header1 nav.menu > ul > li .submenu > ul > li { text-align: left; padding-left: 10px; font-size: 15px; color: #666; }
  .header1 nav.menu > ul > li .firstmenu > a.menutxt { width: calc(100% - 38px); padding-bottom: 0; text-align: left; display: block; padding-left: 10px; }
  .header1 nav.menu > ul > li .firstmenu > a.opensublink { display: block; position: absolute; z-index: 99; right: 10px; top: 0px; color: #999; font-size: 20px; width: 20px; height: 20px; }
  a.opensublink:after { content: "\2b"; display: block; position: relative; font-size: 28px; line-height: 1; transition: 0.3s; }
  a.opensublink.active:after { content: "\f068"; font-size: 20px; top: 5px; } }
.header2 .wrapper { display: block; }

.header2 .headertop { width: 100%; display: flex; justify-content: space-around; padding: 15px 0 2px 0; }

.header2 .headertop .logo a .icon img { max-width: 400px; }

.header2 nav.menu { width: 100%; }

.header1.header2 nav.menu { /* padding: 20px 0px 10px 0px; */ }

.header2 nav.menu > ul { justify-content: center; }

.header2 nav.menu > ul > li:nth-child(n+8) { display: initial; }

.header2 nav.menu > ul > li:nth-child(n+10) { display: none; }

.header2 nav.menu > ul > li:last-child { display: block; }

@media (max-width: 1100px) { .header2 .headertop { justify-content: flex-start; }
  .header2 .headertop { padding: 15px; } }
.header1.header2 nav.menu { padding: 15px 10px 5px 10px; }

.header3 { overflow: hidden; position: fixed; width: 225px; height: 100vh; border-right: 1px solid #ccc; z-index: 99; }

.header3 .wrapper { padding: 0; }

.header3 .headertop { padding: 15px; border-bottom: 1px solid #ccc; }

.header3 .headertop .logo { margin-bottom: 0px; }

.header3 .headertop .logo a { display: block; line-height: 1; }

.header3 .headertop .logo a .icon img { max-height: 75px; max-width: 100%; }

.header3 nav.menu { height: calc(100vh - 90px); overflow: auto; padding: 20px 10px 20px 20px; }

.header3 nav.menu::-webkit-scrollbar { width: 3px; height: 3px; }

.header3 nav.menu::-webkit-scrollbar-thumb { background-color: #333; }

.header3 nav.menu ul li { list-style: none; }

.header3 nav.menu > ul { display: flex; flex-direction: column; }

.header3 nav.menu > ul > li { font-size: 18px; /* color: #666; */ margin-bottom: 20px; }

.header3 nav.menu > ul > li .firstmenu { display: flex; justify-content: space-between; }

.header3 nav.menu > ul > li .firstmenu > a.menutxt { padding-right: 5px; width: 100%; }

.header3 nav.menu > ul > li .submenu { padding-left: 10px; margin-top: 10px; display: none; }

.header3 nav.menu > ul > li .submenu > ul > li { font-size: 15px; /* color: #999; */ margin-bottom: 10px; }

.header3 nav.menu > ul > li .submenu > ul > li > a { width: 100%; }

.header3 nav.menu > ul > li .firstmenu > a.menutxt { width: calc(100% - 38px); padding-bottom: 0; text-align: left; display: block; padding-left: 0px; }

.header3 nav.menu > ul > li .firstmenu > a.opensublink { display: block; display: none; position: absolute; z-index: 99; right: 10px; top: 0px; color: #999; font-size: 20px; width: 20px; height: 20px; }

.header3 a.opensublink:after { content: "\2b"; display: block; position: relative; font-size: 28px; line-height: 1; }

.header3 a.opensublink.active:after { content: "\f068"; font-size: 20px; top: 5px; }

@media (max-width: 1100px) { .header3 { background: #fff; z-index: 999; border: none; width: 100%; top: 0; height: initial; border-bottom: none; }
  .header3 .headertop { padding: 15px; width: 100%; margin-top: 0px; }
  .header3 .wrapper { padding: 0; }
  .showMenu { display: block; }
  .header3 .headertop .logo { display: inline-block; }
  .header3 .headertop .logo a { display: inline-block; }
  .header3 .headertop .logo a .icon img { max-width: 200px; max-height: 30px; }
  .header3 .headertop .logo a .icon { display: block; }
  .header3 nav.menu { display: none; padding: 15px 10px 5px 10px; overflow: auto; width: 100%; border-top: 1px solid #ddd; height: calc(100vh - 58px); }
  .header3 nav.menu::-webkit-scrollbar { width: 5px; height: 5px; }
  .header3 nav.menu > ul li { padding: 8px 0; width: 100%; max-width: 100%; text-align: center; margin: 0; }
  .header3 nav.menu > ul > li { border-bottom: 1px dotted #ccc; font-size: 18px; }
  .header3 nav.menu > ul > li .submenu { position: relative; padding: 10px; margin-top: 0; width: 100%; left: initial; top: initial; transform: initial; opacity: 1; visibility: initial; display: none; box-shadow: none; font-weight: 100; }
  .header3 nav.menu > ul > li .submenu > ul > li { text-align: left; padding-left: 10px; margin-bottom: 0px; color: #666; }
  .header3 nav.menu > ul > li .firstmenu > a.menutxt { padding-left: 10px; } }
footer { padding: 45px 0; }

footer.footer3 { padding-left: 225px; }

footer .wrapper .twoflex { display: flex; justify-content: space-between; align-items: flex-end; }

footer .wrapper .twoflex .leftbox .companyname { font-size: 20px; margin-bottom: 10px; }

footer .wrapper .twoflex .leftbox .footerinfo .oneline { display: flex; margin-bottom: 5px; }

footer .wrapper .twoflex .leftbox .footerinfo .oneline .t1 { width: 95px; flex-shrink: 0; }

footer .wrapper .twoflex .leftbox .footerinfo .oneline .t2 { flex-grow: 1; }

footer .wrapper .twoflex .rightbox { text-align: right; margin-top: 20px; }

footer .wrapper .twoflex .rightbox .social { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 20px; font-size: 24px; }

footer .wrapper .twoflex .rightbox .social .one { display: inline-block; padding-right: 25px; }

footer .wrapper .twoflex .rightbox .social .one:hover { transform: scale(0.9); opacity: 0.9; }

footer .wrapper .twoflex .rightbox .social .one:last-child { padding-right: 0px; }

footer .wrapper .twoflex .rightbox .copyright { font-size: 14px; margin-bottom: 10px; }

footer .wrapper .twoflex .rightbox .iwaredesign { font-size: 14px; }

@media (max-width: 1100px) { footer .wrapper .twoflex { display: block; }
  footer.footer3 { padding-left: 0px; }
  footer .wrapper .twoflex .rightbox { text-align: left; }
  footer .wrapper .twoflex .rightbox .social { justify-content: flex-start; } }
.contact_sec { padding: 4.16667vw 0; }

.contact_sec .txt { text-align: center; font-size: 24px; letter-spacing: 0.1em; font-weight: 100; margin-bottom: 20px; }

.contact_sec form .contactform { width: 100%; max-width: 1000px; margin: 0 auto; }

.contact_sec form .contactform .contactinput { display: flex; flex-wrap: wrap; margin-bottom: 20px; }

.contact_sec form .contactform .contactinput .outbox { width: 50%; padding: 0 1px; }

.contact_sec form .contactform .contactinput .outbox .oneset { background: #f1f1f1; padding: 10px 25px; display: flex; flex-wrap: wrap; margin-bottom: 2px; align-items: center; }

.contact_sec form .contactform .contactinput .outbox .oneset.style2 { display: block; height: 100%; align-items: initial; }

.contact_sec form .contactform .contactinput .outbox .oneset:last-child { margin-bottom: 0px; }

.contact_sec form .contactform .contactinput .outbox .oneset .t1 { width: 100px; }

.contact_sec form .contactform .contactinput .outbox .oneset .t1 .red { color: #cc0000; }

.contact_sec form .contactform .contactinput .outbox .oneset .inputbox { width: calc(100% - 100px); font-size: 15px; }

.contact_sec form .contactform .contactinput .outbox .oneset .inputbox.w100 { width: 100%; }

.contact_sec form .contactform .contactinput .outbox .oneset .inputbox .inputstyle { font-size: 15px; border: none; background: none; }

.contact_sec form .contactform .contactinput .outbox .oneset .inputbox .textareastyle { border: none; background: none; width: 100%; height: 200px; }

.contact_sec form .contactform .bottomline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }

.contact_sec form .contactform .bottomline .btnstyle { color: #fff; letter-spacing: 0.1em; background-color: #333; }

@media (max-width: 767px) { .contact_sec form .contactform .contactinput .outbox { width: 100%; padding: 0; margin-bottom: 2px; }
  .contact_sec .txt { font-size: 16px; } }
@media (max-width: 520px) { .contact_sec form .contactform .bottomline { display: block; }
  .contact_sec form .contactform .bottomline .btnstyle { margin-top: 20px; } }
.maincontent { margin-top: 88px; }

@media (max-width: 1100px) { .maincontent { margin-top: 60px; } }
.header2 + .maincontent { margin-top: 117px; }

@media (max-width: 1100px) { .header2 + .maincontent { margin-top: 58px; } }
.header3 + .maincontent { margin-top: 0px; padding-left: 225px; }

@media (max-width: 1100px) { .header3 + .maincontent { margin-top: 58px; padding-left: 0px; } }
.select_header { position: fixed; right: 0; bottom: 0; z-index: 99999; }

.select_header .innerwrapper .oneset { margin-bottom: 2px; }

.select_header .innerwrapper .oneset button { border: none; background: rgba(255, 255, 255, 0.8); padding: 10px 20px; z-index: 9999; transform: translateX(15px); }

.select_header .innerwrapper .oneset button:hover { transform: translateX(0px); }

.firstaso { animation-duration: 1s; animation-fill-mode: both; animation-name: firstaso; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes firstaso { 0% { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); } }
/*以上為第一階段的CSS*/
/*以下為第二階段的CSS_20220106*/
.flextwoblock { display: flex; padding: 40px 0; }
.flextwoblock .leftside {width: 240px;padding-right: 40px;display: none;}
@media (max-width: 1100px) { .flextwoblock .leftside { display: none; } }
.flextwoblock .rightside { flex: 1; }

.header3 + .maincontent .flextwoblock .leftside { display: none; }

.unit_title { font-weight: bold; font-size: 24px; }

.unit_nav > ul > li { list-style: none; border-bottom: 1px solid #333; margin-bottom: 2px; }
.unit_nav > ul > li > a { display: block; padding: 10px; }
.unit_nav > ul > li > a.active { background: #333; color: #fff; }
.unit_nav > ul > li > a.active:hover { background: #333; }
.unit_nav > ul > li > a:hover { background: #999; color: #fff; }

.page_box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; padding: 40px 0; color: #959696; }
.page_box .page_num { display: inline-block; font-size: 15px; font-weight: 100; text-align: center; margin: 0 5px; text-decoration: none; border-radius: 100%; width: 30px; height: 30px; line-height: 30px; color: #333; }
.page_box .page_num.active, .page_box .page_num:hover { background: #555555; color: #fff; }
.page_box .page_num.page_arrow { color: #aaa; font-size: 18px; }
.page_box .page_num.page_arrow:hover { background: #ccc; color: #fff; }
.page_box .page_dot { display: inline-block; padding: 10px; text-align: center; margin: 0 3px; }
.page_box .page_select { display: inline-block; margin-left: 20px; }
.page_box .page_select .num_input { border: 1px solid #cfcfcf; width: 50px; height: 30px; padding: 3px 5px; }

.list_sec { display: flex; flex-wrap: wrap; }
.list_sec.w3 .one { width: calc(100% / 3); }
@media (max-width: 480px) { .list_sec.w3 .one { width: calc(100% / 2); } }
.list_sec.w2 .one { width: calc(100% / 2); }
.list_sec.w1 .one { width: 100%; border-bottom: 1px solid #ccc; }
.list_sec.w1 .one .onein { display: flex; }
.list_sec.w1 .one .con { margin-top: 0; }
.list_sec.w1 .one .photo { width: 150px; flex-shrink: 0; padding-right: 20px; }
@media (max-width: 480px) { .list_sec.w1 .one .photo { width: 100px; padding-right: 10px; } }
.list_sec .one {width: 25%;padding: 15px 10px;}
@media (max-width: 700px) { .list_sec .one { width: calc(100% / 3); } }
@media (max-width: 480px) { .list_sec .one { width: calc(100% / 2); } }
.list_sec .one .onein { width: 100%; padding: 5px; }
.list_sec .one .onein:hover .photo .pic img { transform: scale(1.1); }
.list_sec .one .photo .pic {height: 0;text-align: center;position: relative;display: block;overflow: hidden;padding-bottom: 100%;overflow: hidden;background: #eee;}
.list_sec .one .photo .pic img { max-width: 100%; max-height: 100%; width: 100%; transition: 0.5s; position: absolute; display: block; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.list_sec .one .con { margin-top: 10px; flex: 1; }
.list_sec .one .con .date { font-size: 14px; color: #ccc; margin-bottom: 5px; }
.list_sec .one .con .title { font-weight: bold; font-size: 18px; color: #000; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 24px; max-height: 48px; }
.list_sec .one .con .brief { color: #444; font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 24px; max-height: 72px; margin-top: 5px; }
.list_sec .one .coverlink { display: block; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top: 0; bottom: 0; }
.list_sec .one .coverlink:after, .list_sec .one .coverlink:before { content: ''; background-color: #000; position: absolute; z-index: 1; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: 0.3s; }
.list_sec .one .coverlink:after { width: 80%; height: 2px; }
.list_sec .one .coverlink:before { width: 2px; height: 80%; }
.list_sec .one .coverlink:hover { background-color: rgba(255, 255, 255, 0.8); }
.list_sec .one .coverlink:hover:after { width: 20%; height: 2px; opacity: 1; }
.list_sec .one .coverlink:hover:before { width: 2px; height: 20%; opacity: 1; }

.search_sec { display: flex; max-width: 300px; margin-bottom: 15px; }
.search_sec input { border: 1px solid #ccc; padding: 8px 10px; flex: 1; }
.search_sec button { padding: 5px; border: none; background: #333; width: 45px; flex-shrink: 0; }
.search_sec button i { color: #fff; }

.noresult { display: flex; align-items: center; margin-top: 20px; }
.noresult .txt { font-size: 20px; }
.noresult img { max-width: 80px; }

.select_liststyle { display: flex; flex-wrap: wrap; }
.select_liststyle .one { width: 25%; padding: 10px; }
.select_liststyle .one.active .txt, .select_liststyle .one:hover .txt { background: #333; }
.select_liststyle .one .onein { border: 1px solid #ccc; padding: 10px; text-align: center; cursor: pointer; }
.select_liststyle .one .photo { width: 100%; }
.select_liststyle .one .txt { margin-top: 10px; display: block; text-align: center; background: #ccc; color: #fff; padding: 5px 10px; cursor: pointer; }

.listin_title {padding-top: 30px;font-size: 28px;font-weight: bold;text-align: center;max-width: 1000px;margin: 0 auto;display: none;}

.back {padding-bottom: 50px;padding-top: 50px;text-align: center;}

/*# sourceMappingURL=style.css.map */