@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%; }

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; }

.linktxt:hover { opacity: 0.6; }

/*-------------------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; }

/*反白文字*/
::selection { background: yellow; color: #333; }

::-moz-selection { background: yellow; color: #333; }

img { vertical-align: middle; }

.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; }

.video-container { position: relative; padding-bottom: 56.25%; 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%; }

.red { color: #cc0000; }

.fontsize13 { font-size: 1.3rem; }

.fontsize12 { font-size: 1.2rem; }

.fontsize15 { font-size: 1.5rem; }

.fontsize16 { font-size: 1.6rem; }

.fontsize20 { font-size: 2rem; }

.textalignrigh { text-align: right; }

.textaligncenter { text-align: center; }

.textunderline { text-decoration: underline; }

input, button { outline: none; }

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

.verticaltop { vertical-align: top; }

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

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

/*元素垂直置中*/
/*會由後台上稿的圖片*/
/*-------------------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; }

@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; } }
/*-------------------common css-----------------*/
/*如果有載入字型用這段*/
@font-face { font-family: 'jf-openhuninn'; font-style: normal; font-weight: normal; src: local("jf-openhuninn-1.1"), url("../fonts/jf-openhuninn-1.1.ttf") format("woff"); }
html { position: relative; font-size: 100%; }

body { color: #535353; font-size: 16px; font-family: adobe-fan-heiti-std, Microsoft JhengHei, PMingLiU, Arial, sans-serif, "FontAwesome"; line-height: 1.3; width: 100%; min-width: 360px; margin: 0 auto; position: relative; overflow-x: hidden; letter-spacing: 0; }

@media (max-width: 320px) { body { overflow-x: auto; } }
::-webkit-scrollbar { background-color: transparent; width: 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: #a05900; border-radius: 0px; }

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

.wrapper { max-width: 1640px; margin: 0 auto; padding: 0 20px; }

.maintitle { font-size: 30px; font-weight: bold; text-align: center; text-transform: uppercase; }

@media (max-width: 480px) { .maintitle { font-size: 22px; } }
header { padding: 0; width: 100%; /*position: relative;*/ z-index: 99999; position: sticky; top: 0; background-color: #fff; }
header .wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
header .logo { width: 20.375%; }
header .logo a { width: 100%; }
header .logo a img { width: 100%; }
header .header_nav { width: 55%; font-family: 'jf-openhuninn'; }
header .header_nav .headermenu { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
header .header_nav .headermenu > li { list-style: none; padding: 25px 3%; position: relative; }
header .header_nav .headermenu > li:nth-child(3):hover > a:after { left: -25px; }
header .header_nav .headermenu > li:nth-child(4) .firstmenu .firstmenuin { transform: translate(-17%, 0px); }
header .header_nav .headermenu > li:hover > a:after { content: url(../images/menu_active.png); width: 100%; height: 5px; display: block; position: absolute; bottom: -10px; left: -6px; }
header .header_nav .headermenu > li:hover .firstmenu_wholl,
header .header_nav .headermenu > li.active .firstmenu_wholl  { display: block; }
header .header_nav .headermenu > li:first-child { padding-left: 0; }
header .header_nav .headermenu > li:last-child { padding-right: 0; }
header .header_nav .headermenu > li > a { font-size: 20px; position: relative; color:#535353; text-decoration: none !important; }
header .header_nav .headermenu > li .firstmenu_wholl { background: rgba(108, 61, 2, 0.82); position: absolute; width: 100vw; padding: 20px 0; left: 0; z-index: 99; top: 76px; display: none; }
header .header_nav .headermenu > li .firstmenu_wholl:before { background: rgba(108, 61, 2, 0.82); content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; }
header .header_nav .headermenu > li .firstmenu { color: #fff; position: relative; display: flex; justify-content: flex-start; }
header .header_nav .headermenu > li .firstmenu .firstmenuin { display: flex; flex-wrap: wrap; position: relative; transform: translate(-38%, 0px); }
header .header_nav .headermenu > li .firstmenu li { position: relative; font-size: 20px; letter-spacing: 0; padding: 0 17px; list-style: none; }
header .header_nav .headermenu > li .firstmenu li a{ color:#fff; text-decoration: none; }
header .header_nav .headermenu > li .firstmenu li:last-child:after { display: none; }
header .header_nav .headermenu > li .firstmenu li:after { width: 1px; height: 20px; background: #e5e5e5; content: ""; position: absolute; right: 0; top: 4px; }
header .header_nav .headermenu > li .firstmenu li a:hover,
header .header_nav .headermenu > li .firstmenu li:hover a { opacity: 0.7; }

/* 20220810 */
.phone-block .phone-menu ul.firstmenuin li/* ,
header .header_nav .headermenu > li .firstmenu li */{
  position: static;
}

header .header_nav .headermenu > li .firstmenu .secondmenu{
  display: none;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: -62vw;
  top: 1.75rem;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin,
header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  top: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgba(242, 242, 242, 1);
  border-bottom: 1px solid #cccccc;
  box-shadow: 0 5px 5px rgba(0,0,0,0.15);
}

header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin{
  max-height: 80vh;
  overflow-y: scroll;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin li,
header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin li{
  flex-basis: 250px;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin li::after,
header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin li::after {
  display: none;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin .img,
header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin .img{
  position: relative;
  height: 0;
  padding-bottom: 100%;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin .img img,
header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin .img img{
  position:absolute;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  max-height: 100%;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin .item,
header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin .item{
  color: #3c3a38;
  font-size: 16px;
  line-height: 1.25;
  padding: 5px 3px 3px;
  text-align: center;
}

header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin a{
  display: block;
  position: relative;
  overflow: hidden;
}

/* header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin .img::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.35;
} */

header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin .item{
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(237, 112, 50,0.95);
  color:#fff;
  padding-bottom: 5px;
  z-index: 2;
  transform: translateY(100%);
  transition: 0.25s;
}

header .header_nav .headermenu > li .firstmenu .secondmenu .secondmenuin a:hover .item{
  transform: translateY(0);
}

/* Hover */
/* header .header_nav .headermenu > li .firstmenu li:hover .secondmenu, */
.phone-block .phone-menu ul.firstmenuin li.open .secondmenu,
header .header_nav .headermenu > li .firstmenu .secondmenu.open{
  display: block;
}

header .header_nav .headermenu > li .firstmenu .jsNav-catalog{
  position: relative;
}

header .header_nav .headermenu > li .firstmenu .jsNav-catalog::before{
  content: '';
  display: none;
  width: 0;
  height: 0;
  border-bottom: 10px solid #fff;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -5px;
}

header .header_nav .headermenu > li .firstmenu .jsNav-catalog.open::before{
  display: block;
}

/* Mobile */
.phone-block .phone-menu ul.firstmenuin li.jsNav-catalog a + .secondmenu{
  display: none;
}

.phone-block .phone-menu ul.firstmenuin li.jsNav-catalog a + .secondmenu.open{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  overflow-y: scroll;
  background: rgba(242, 242, 242, 1);
  padding: 15px 10px;
}

.jsNav-catalog-close {
  color: #fff;
  background: #00b3ea;
  font-size: 18px;
  text-align: center;
  padding: 15px 15px 10px;
  border: none;
  line-height: 1;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenutitle{
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5rem 0.5rem 0rem;
  font-size: 1.3rem;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenutitle::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0.5rem;
  width: 35px;
  height: 6px;
  background-color: #a95e01;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin {
  left: 0;
  transform: translateX(0);
  list-style: none;
  top: 0;
  padding-top: 0;
  margin-bottom: 1rem;
  justify-content: space-around;
  box-shadow: none;
}

.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin li{
  flex-basis: 200px;
  margin-bottom: 0.5rem;
}
.phone-block .phone-menu ul.firstmenuin .secondmenu .secondmenuin .item{
  font-size: 1rem;
  padding-top: 6px;
}

.phone-block .phone-menu .headermenu li .firstmenu_wholl .firstmenu ul ~ .secondmenu{
  display: none;
}

@media screen and (min-width:1801px) and (max-width:1890px) {
  header .header_nav .headermenu > li .firstmenu .secondmenu{
    left: -63vw;
  }
}

@media screen and (min-width:1450px) and (max-width:1800px) {
  header .header_nav .headermenu > li .firstmenu .secondmenu{
    left: -64vw;
  }
}

/* End */

header .last_lang_search { display: flex; flex-wrap: wrap; align-items: center; }
header .last_lang_search .langbox { padding: 10px 0; }
header .last_lang_search .langbox .top_box { display: flex; flex-wrap: wrap; align-items: center; color: #535353; text-decoration: none !important; font-family: adobe-fan-heiti-std, Microsoft JhengHei, PMingLiU, Arial, sans-serif, "FontAwesome"; }
header .last_lang_search .langbox .top_box .leftbox { margin-right: 10px; }
header .last_lang_search .langbox .top_box .leftbox img { max-width: 21px; }
header .last_lang_search .spacer { content: ""; display: block; width: 1px; height: 24px; background: #bfbfbf; margin: 0 20px; }
header .last_lang_search .searchbox { display: flex; align-items: center; padding: 10px 0; position: relative; }
header .last_lang_search .searchbox .top_box{ order:1 }
header .last_lang_search .searchbox .top_box img { width: 22px; }
header .last_lang_search .searchbox .hoversearchshow { display: none; top: 43px; /*position: absolute;*/ z-index: 99; right: -11px; background: #6c3d02; padding: 8px 10px 8px 10px; color: #ffffff; width: 255px; border-radius: 3px; margin-right: 5px; }
header .last_lang_search .searchbox .hoversearchshow form .box { display: flex; /*flex-wrap: wrap;*/ align-items: center; }
header .last_lang_search .searchbox .hoversearchshow form .box input { width: 100%; padding: 5px; background: none; border: 1px solid #906632; }
header .last_lang_search .searchbox .hoversearchshow form .box .submit_icon { flex:none; margin-left: 5px; background: none; border: none; padding-top: 6px; font-size: 16px; }
header .last_lang_search .searchbox:hover .hoversearchshow { display: block; }

@media (max-width: 1550px) {
  header .wrapper,
  header .last_lang_search,
  header .last_lang_search .searchbox .hoversearchshow form .box{
    flex-wrap: nowrap;
  }

  header .last_lang_search .searchbox{
    flex:1
  }

  header .last_lang_search .searchbox .hoversearchshow form .box .submit_icon{
    flex:none;
  }

  header .header_nav .headermenu > li {
    padding-left:3%;
  }

  header .last_lang_search .spacer {
    content: "";
    display: block;
    width: 1px;
    height: 24px;
    background: #bfbfbf;
    margin: 0 15px;
  }
}

@media (max-width: 1440px) { 
  header .header_nav .headermenu > li { padding-left: 2%; padding-right: 2%; }
}

@media (max-width: 1200px) { header .header_nav .headermenu > li { padding: 25px 2%; }
  header .header_nav .headermenu > li .firstmenu_wholl { padding: 15px 0; } }
@media (max-width: 1050px) { header .header_nav .headermenu > li { padding: 25px 2%; } }
.showMenu { display: none; cursor: pointer; position: absolute; top: 12px; height: 30px; width: 30px; right: 25px; z-index: 9999; }
.showMenu #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; }
.showMenu #btn.on span { background: #333; }
.showMenu #btn.on span:nth-child(1) { animation: span-first-on 0.5s ease-in-out; animation-fill-mode: forwards; }
.showMenu #btn.on span:nth-child(2) { animation: span-second-on 0.5s ease-in-out; animation-fill-mode: forwards; }
.showMenu #btn.on span:nth-child(3) { animation: span-third-on 0.5s ease-in-out; animation-fill-mode: forwards; }
.showMenu #btn.on:hover span::before { width: 100%; transition: all 0.3s linear; }
.showMenu #btn span { position: absolute; width: 30px; height: 2px; top: 50%; left: 50%; background: #333; border-radius: 2px; overflow: hidden; transition: all 0.3s linear; }
.showMenu #btn span::before { content: ""; position: absolute; width: 0; height: 100%; top: 0; right: 0; background: #333; transition: all 0.3s linear; }
.showMenu #btn span:nth-child(1) { animation: span-first-off 0.5s ease-in-out; animation-fill-mode: forwards; }
.showMenu #btn span:nth-child(2) { animation: span-second-off 0.5s ease-in-out; animation-fill-mode: forwards; }
.showMenu #btn span:nth-child(3) { animation: span-third-off 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%); } }
/*phone menu*/
.phone-block { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; display: none; top: 0; margin-top: 55px; background: #fff; }
.phone-block .phone-menu { width: 100%; height: calc(100% - 52px); overflow: auto; }
.phone-block .phone-menu > ul > li > a { display: block; font-size: 18px; padding: 15px 20px 11px 20px; border-bottom: 1px solid #dfdfdf; text-transform: uppercase; }
.phone-block .phone-menu > ul > li.active > a, .phone-block .phone-menu > ul > li:hover > a { background: #a05900; color: #fff; }
.phone-block .phone-menu ul.firstmenuin { display: none; padding: 5px 0; background: #ccc; }
.phone-block .phone-menu ul.firstmenuin > li:hover > a { color: #a05900; }
.phone-block .phone-menu ul.firstmenuin > li > a { display: block; border-bottom: none; padding: 10px 30px; position: relative; font-size: 16px; }
.phone-block .phone-menu ul.firstmenuin > li > a br { display: none; }
.phone-block .phone-menu ul.firstmenuin .secmenu { display: none; }
.phone-block .phone-menu ul.firstmenuin .secmenu > li > a { display: block; color: #555555; border-bottom: 1px solid #fff; padding: 10px 30px; position: relative; background: #ccc; font-size: 1.6rem; }
.phone-block .searchbox { padding: 10px 15px; width: 100%; }
.phone-block .searchbox form .box { display: flex; flex-wrap: wrap; align-items: center; }
.phone-block .searchbox form .box input { padding: 8px; background: #232a2f; width: calc(100% - 50px); color: #fff; border: none; height: 38px; }
.phone-block .searchbox form .box input::placeholder { color: #fff; }
.phone-block .searchbox form .box .submit_icon { background: none; border: none; padding-top: 6px; font-size: 16px; width: 50px; }
.phone-block .langbox { padding: 15px 20px; }
.phone-block .langbox .top_box { display: flex; flex-wrap: wrap; align-items: center; }
.phone-block .langbox .top_box .leftbox { margin-right: 10px; }
.phone-block .langbox .top_box .leftbox img { max-width: 21px; }

@media (min-width: 1051px) { .phone-block { display: none !important; } }
@media (max-width: 1050px) { header { position: fixed; padding-bottom: 10px; background-color: #fff; }
  header.active { background-color: #fff; }
  header .wrapper .logo { width: 230px; padding-top: 12px; }
  header .wrapper .header_nav { display: none; }
  header .wrapper .showMenu { display: block; }
  header .wrapper .last_lang_search { display: none; }
  header .wrapper .mobileshow { display: block; }
  header .wrapper .pc-block { justify-content: start; } }
@media (max-width: 360px) { header .wrapper .logo { width: 210px; padding-top: 12px; }
  header .wrapper { padding: 0 10px; }
  .showMenu { right: 15px; }
  .phone-block { margin-top: 53px; } }
.indexbanner { width: 100%; }
.indexbanner .slick-dots li { margin: 0 0px; padding: 9px; border-radius: 100%; }
.indexbanner .slick-dots li button { width: 7px; height: 7px; border-radius: 0; background: #ffffff; padding: 0; }
.indexbanner .slick-dots li button:hover, .indexbanner .slick-dots li button:focus { background: #fff; }
.indexbanner .slick-dots li.slick-active { background: #000; }


.indexbanner .oneset_desktop{
  display: block;
}

.indexbanner .oneset_mobile{
  display: none;
}

.indexbanner .oneset_mobile img{
  width: 100%;
}

@media (max-width: 1050px) { 
  .indexbanner { padding-top: 55px; }
  .indexbanner .oneset_desktop{
    display: none;
  }
  .indexbanner .oneset_mobile{
    display: block;
  }
}
.sec2 { padding-top: 60px; }
.sec2 .maintitle { margin-bottom: 70px; }
.sec2 .iconbox { display: flex; justify-content: center; padding-bottom: 90px; border-bottom: 1px solid #000000; }
.sec2 .iconbox .oneset { display: flex; align-items: center; position: relative; }
.sec2 .iconbox .oneset:last-child:after { display: none; }
.sec2 .iconbox .oneset:last-child .rightcon:after { display: none; }
.sec2 .iconbox .oneset .photo { text-align: center; padding-right: 8%; width: 95px; }
.sec2 .iconbox .oneset .photo img { max-width: 100%; min-width: 75px; }
.sec2 .iconbox .oneset .rightcon { position: relative; width: -webkit-fill-available; width: fill-available; /*word-break: break-all;*/ }
.sec2 .iconbox .oneset .rightcon .t1 { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
.sec2 .iconbox .oneset .rightcon .t2 { font-size: 14px; }
.sec2 .iconbox .spacer { background: #bcc0c5; width: 1px; margin: 0 2.5%; }

@media (max-width: 1440px) { .sec2 .iconbox .spacer { margin: 0 1.5%; }
  .sec2 .iconbox .oneset .photo { padding-right: 5%; }
  .sec2 .iconbox .oneset .rightcon .t2 { font-size: 12px; }
  .sec2 .maintitle { margin-bottom: 40px; } }
@media (max-width: 1200px) { .sec2 .iconbox .oneset { flex-wrap: wrap; justify-content: center; text-align: center; }
  .sec2 .iconbox .oneset .photo { padding-right: 0; margin-bottom: 15px; } }
@media (max-width: 830px) { .sec2 .iconbox { flex-wrap: wrap; }
  .sec2 .iconbox .oneset { width: 30%; margin: 20px 0; }
  .sec2 .iconbox .spacer { margin: 20px 1.5%; }
  .sec2 .iconbox .spacer.nt3 { display: none; } }
@media (max-width: 480px) { .sec2 { padding-top: 40px; }
  .sec2 .maintitle { margin-bottom: 10px; }
  .sec2 .iconbox .oneset { padding: 0 10px; }
  .sec2 .iconbox { padding-bottom: 20px; }
  .sec2 .iconbox .oneset .rightcon .t1 { font-size: 18px; }
  .sec2 .iconbox .oneset .photo img { max-height: 56px; min-width: initial; } }
.sec_ipro { margin-top: 50px; margin-bottom: 50px; }
.sec_ipro .wrapper { max-width: 1460px; margin: 0 auto; }
.sec_ipro .wrapper .maintitle { margin-bottom: 20px; }
.sec_ipro .wrapper .probox { display: flex; flex-wrap: wrap; }
.sec_ipro .wrapper .probox .oneset { width: calc(100% / 3); padding: 16px; }
.sec_ipro .wrapper .probox .oneset .onesetin { width: 100%; display: block; position: relative; overflow: hidden; }
.sec_ipro .wrapper .probox .oneset .onesetin:hover .photo img { transform: scale(1.1) rotate(3deg); }
.sec_ipro .wrapper .probox .oneset .onesetin .photo { width: 100%; overflow: hidden; }
.sec_ipro .wrapper .probox .oneset .onesetin .photo img { width: 100%; transition: 0.5s; }
.sec_ipro .wrapper .probox .oneset .onesetin .txt { top: 0; bottom: 0; left: 0; right: 0; position: absolute; flex-direction: column; display: flex;  justify-content: flex-start; align-items: flex-start; width: 100%; font-weight: bold; }
.sec_ipro .wrapper .probox .oneset .onesetin .txt .txtbox { font-size: 30px; color: #fff; padding: 15px 20px 5px; background: rgba(0, 0, 0, 0.3); }

@media (max-width: 1000px) { .sec_ipro .wrapper .probox .oneset .onesetin .txt .txtbox { font-size: 18px; } }
@media (max-width: 600px) { .sec_ipro .wrapper .probox .oneset { width: calc(100% / 2); padding: 10px; } }
@media (max-width: 480px) { .sec_ipro { margin-top: 30px; margin-bottom: 30px; }
  .sec_ipro .wrapper .maintitle { margin-bottom: 15px; }
  .sec_ipro .wrapper .probox .oneset .onesetin .txt .txtbox { font-size: 15px; padding-top: 10px; }}
.sec_about { background: url(../images/i_ab_bg.jpg) no-repeat center; background-size: cover; padding: 40px 0 50px 0; }
.sec_about .wrapper { max-width: 1240px; margin: 0 auto; }
.sec_about .wrapper .maintitle { margin-bottom: 30px; }
.sec_about .wrapper .iabout_txt { border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 36px 45px 40px 45px; font-size: 20px; line-height: calc(36 / 20); font-weight: bold; }

@media (max-width: 768px) { .sec_about .wrapper .iabout_txt { font-size: 16px; }
  .sec_about .wrapper .maintitle { margin-bottom: 15px; } }
@media (max-width: 480px) { .sec_about .wrapper .iabout_txt { padding: 20px 0; } }
footer { background: #232a2f; width: 100%; }
footer .wrapper { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; max-width: 1180px; width: 100%; margin: 0 auto; padding: 20px; }
footer .wrapper, footer .wrapper a{ font-family: adobe-fan-heiti-std, Microsoft JhengHei, PMingLiU, Arial, sans-serif, "FontAwesome"; color:#fff !important }
footer .wrapper .leftbox { display: flex; flex-wrap: wrap; align-items: center; }
footer .wrapper .leftbox .logo img { max-width: 100%; }
footer .wrapper .leftbox .right_info { font-size: 17px; line-height: calc(30 / 17); padding-left: 30px; }
footer .wrapper .rightbox { text-align: right; }
footer .wrapper .rightbox .social_iwaredesign { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 10px; justify-content: flex-end; }
footer .wrapper .rightbox .social_iwaredesign .fsocial a { margin-right: 10px; }
footer .wrapper .rightbox .social_iwaredesign .iware_design { font-size: 13px; color: #8a8989; margin-left: 5px; }
footer .wrapper .rightbox .copyright { font-size: 16px; color: #7b7f82; margin-top: 10px; }

@media (max-width: 850px) { footer .wrapper .leftbox { width: 100%; justify-content: center; }
  footer .wrapper .rightbox { width: 100%; margin-top: 15px; }
  footer .wrapper .rightbox .social_iwaredesign { justify-content: center; }
  footer .wrapper .rightbox .copyright { text-align: center; } }
@media (max-width: 480px) { footer .wrapper .leftbox .logo { display: none; }
  footer .wrapper .leftbox .right_info { font-size: 14px; padding-left: 0; }
  footer .wrapper .rightbox .copyright { font-size: 12px; } }
.top { overflow: hidden; width: 70px; height: 70px; border-radius: 100%; background-color: #ed6b2b; position: fixed; bottom: -20%; right: 2%; display: block; cursor: pointer; transition: 0.3s; }
.top:hover { background-color: #524643; }
.top .topin { color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.top .topicon { margin-bottom: 5px; }

@media (max-width: 480px) { .top .topicon { margin-bottom: 0; }
  .top .topicon img { max-width: 12px; }
  .top { font-size: 12px; width: 45px; height: 45px; } }
.innerbanner { width: 100%; }
.innerbanner img { width: 100%; max-width: 100%; }

@media (max-width: 1050px) { .innerbanner { padding-top: 56px; } }
.innerpage { max-width: 1590px; width: 100%; margin: 0 auto; padding: 0 20px; }

.bread { padding: 30px 0 60px 0; display: flex; flex-wrap: wrap; align-items: baseline; }
.bread .oneline { align-items: baseline; display: flex; flex-wrap: wrap; font-size: 16px; line-height: 1.6; }
.bread .oneline .homeicon { margin-right: 10px; }
.bread .oneline .homeicon img { vertical-align: baseline; }
.bread .oneline .roadtxt { color: #797b75; }
.bread .oneline .roadtxt.active { color: #2d2d2d; }
.bread .oneline .roadtxt a { color: #797b75; }
.bread .oneline .spacer { padding: 0 10px 0 5px; }

@media (max-width: 768px) { .bread { padding: 30px 0 30px 0; } }
.pagetitle { position: relative; margin-bottom: 50px; }
.pagetitle .smalltxt { font-size: 16px; color: #a05900; background-color: #fff; padding: 0px 18px 5px 18px; margin-bottom: 15px; position: relative; z-index: 1; display: inline-block; left: 25px; font-weight: bold; display: none;}
.pagetitle .bigtxt { margin-top: 0; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.pagetitle .bigtxt .inbigtxt { position: relative; display: inline-block; font-size: 32px; color: #000000; font-weight: bold; /* border: 1px solid #aaaaaa; */ /* padding: 27px 40px 16px 40px; */ background: #fff; padding-left: 30px;}
.pagetitle .bigtxt .inbigtxt:before{ content: ""; position: absolute; width: 14px; height: 33px; background: #ed6b2b; border-radius: 4px;left: 0;}
.pagetitle .bigtxt .inbigtxt:after { content: ""; position: absolute; z-index: -1; width: 20px; height: 20px; background: url(../images/inner_title_bg.png) no-repeat; bottom: -6px; right: -6px; display: none; }

@media (max-width: 480px) { .pagetitle .bigtxt .inbigtxt { font-size: 28px; } }
.txt_sec { font-size: 18px; line-height: 2; font-weight: bold; padding-bottom: 20px; color: #535353; }
.txt_sec .mcolor { color: #a05900; }
.txt_sec .aboutbigtxt { font-size: 24px; }

@media (max-width: 768px) { 
  .txt_sec { font-size: 16px; }
  .txt_sec .aboutbigtxt { font-size: 18px; }
  .txt_sec table img{ width: 100% !important; max-width: 100%; }
  .txt_sec table th, .txt_sec table td, .txt_sec table *{ font-size: 100% !important; }
} 
.txt_img { width: 100%; text-align: center; padding: 20px 0; }
.txt_img img { max-width: 100%;}

.wholl_with_photo { width: 100%; margin: 60px 0; }
.wholl_with_photo img { width: 100%; }

@media (max-width: 768px) { .wholl_with_photo { margin: 20px 0 30px 0; } }
.inpage_smalltitle { padding-left: 60px; font-size: 22px; color: #a05900; font-weight: bold; line-height: 1.6; margin-bottom: 40px; position: relative; }
.inpage_smalltitle::before { content: ""; width: 40px; height: 5px; background: #a05900; position: absolute; left: 0; top: 14px; display: block; }

@media (max-width: 768px) { .inpage_smalltitle { margin-bottom: 20px; } }
.about_sec2 { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: 50px; }
.about_sec2 .leftbox { width: 52%; }
.about_sec2 .rightbox { width: 43%; padding-left: 3%; }
.about_sec2 .rightbox .photo { width: 100%; text-align: right; }
.about_sec2 .rightbox .photo img { width: 100%; max-width: 100%; }

@media (max-width: 768px) { .about_sec2 .leftbox { width: 100%; }
  .about_sec2 .rightbox { width: 100%; padding-left: 0%; } }
.about2_sec { padding-bottom: 40px; }
.about2_sec .wrapper { max-width: 1200px; }
.about2_sec .oneset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 2px solid #797b75; padding: 40px; }
.about2_sec .oneset:nth-child(2n) { flex-direction: row-reverse; }
.about2_sec .oneset .context_txt { width: 48%; }
.about2_sec .oneset .context_txt .t1 { font-size: 30px; color: #000; margin-bottom: 45px; }
.about2_sec .oneset .context_txt .t2 { font-size: 18px; color: #535353; line-height: 2; }
.about2_sec .oneset .photo { width: 43%; padding: 40px; margin-top: 20px; box-shadow: 2px 0px 32px 0px rgba(0, 0, 0, 0.4); }
.about2_sec .oneset .photo .pic { height: 0; text-align: center; position: relative; display: block; overflow: hidden; padding-bottom: calc(300/500 * 100%); }
.about2_sec .oneset .photo 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; width: 100%; }

@media (max-width: 680px) { .about2_sec .oneset .context_txt { width: 100%; }
  .about2_sec .oneset .photo { width: 100%; }
  .about2_sec .oneset .context_txt .t1 { font-size: 24px; margin-bottom: 20px; }
  .about2_sec .oneset .context_txt .t2 { font-size: 16px; }
  .about2_sec .oneset { padding: 30px 0; } }
.about3_sec { margin-bottom: 30px; }
.about3_sec .wrapper { max-width: 880px; }
.about3_sec .oneset { display: flex; flex-wrap: wrap; }
.about3_sec .oneset:first-child .centerbar .bar1 { width: 60%; height: 35px; background: #0067b7; border-radius: 50px; margin-left: 20%; }
.about3_sec .oneset:first-child .centerbar .bar3 { height: calc(100% - 70px); }

.about3_sec .oneset .centerbar .bar1,
.about3_sec .oneset .centerbar .bar3{
  opacity: 0.15;
}

.about3_sec .oneset:nth-child(2n) { flex-direction: row-reverse; }
.about3_sec .oneset:nth-child(2n) .yearcon { justify-content: flex-start; padding-right: 0%; padding-left: 6%; }
.about3_sec .oneset:nth-child(2n) .centerbar .bar2 .arrow0 { left: initial; right: -89%; transform: rotate(180deg); }
.about3_sec .oneset:nth-child(2n) .centerbar .bar2 .arrow2 { right: initial; left: -300%; transform: rotate(180deg); }
.about3_sec .oneset:nth-child(2n) .centerbar .bar3 { background: #0067b7; }
.about3_sec .oneset:nth-child(2n) .timerphoto { padding-left: initial; text-align: right; padding-right: 12%; }
.about3_sec .oneset .yearcon { width: 48.5%; display: flex; flex-wrap: wrap; justify-content: flex-end; padding-right: 6%; padding-bottom: 40px; }
.about3_sec .oneset .yearcon .year { font-size: 30px; font-weight: bold; color: #2c2b2b; margin-bottom: 7px; }
.about3_sec .oneset .yearcon .con { font-size: 18px; font-weight: bold; color: #535353; line-height: 1.6; }
.about3_sec .oneset .yearcon .con ul li { margin-bottom: 5px; list-style: none; padding-left: 17px; position: relative; }
.about3_sec .oneset .yearcon .con ul li:before { content: ""; display: block; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 100%; background: #0053a5; }
.about3_sec .oneset .yearcon .con .browntxt { color: #a05900; }
.about3_sec .oneset .centerbar { width: 3%; }
.about3_sec .oneset .centerbar .bar2 { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin: 5px 0 6px 0; }
.about3_sec .oneset .centerbar .bar2 .arrow0 { position: absolute; width: 92%; left: -89%; }
.about3_sec .oneset .centerbar .bar2 .arrow0 img { width: 100%; }
.about3_sec .oneset .centerbar .bar2 .arrow1 { width: 100%; }
.about3_sec .oneset .centerbar .bar2 .arrow2 { position: absolute; width: 278%; right: -300%; }
.about3_sec .oneset .centerbar .bar2 .arrow2 img { width: 100%; }
.about3_sec .oneset .centerbar .bar3 { width: 60%; height: calc(100% - 37px); background: #a05900; border-radius: 50px; margin-left: 20%; }
.about3_sec .oneset .timerphoto { width: 48.5%; padding-left: 12%; padding-bottom: 40px; }
.about3_sec .oneset .timerphoto img { max-width: 100%; }

@media (max-width: 480px) { .about3_sec .oneset:nth-child(2n) .centerbar .bar2 .arrow0 { top: -4%; }
  .about3_sec .oneset .yearcon .con { font-size: 14px; font-weight: bold; color: #535353; }
  .about3_sec .oneset .yearcon .year { font-size: 24px; }
  .about3_sec .oneset .yearcon .con ul li:before { top: 4px; } }
.gray_prolist { width: 100%; background: url(../images/pro_list1_bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; }
.gray_prolist .wrapper { display: flex; flex-wrap: wrap; justify-content: center; }
.gray_prolist .wrapper .oneset { width: 30%; display: flex; flex-wrap: wrap; align-items: center; padding: 20px 4%; }
.gray_prolist .wrapper .oneset .icon { width: 30%; padding-right: 6%; }
.gray_prolist .wrapper .oneset .icon img { max-width: 100%; }
.gray_prolist .wrapper .oneset .textcon { width: 70%; }
.gray_prolist .wrapper .oneset .textcon .t1 { font-size: 24px; margin-bottom: 10px; font-weight: bold; }
.gray_prolist .wrapper .oneset .textcon .t2 { font-size: 16px; color: #535353; }

@media (max-width: 1280px) { .gray_prolist .wrapper .oneset { width: 33%; padding: 20px 2%; } }
@media (max-width: 1024px) { .gray_prolist .wrapper .oneset { width: 50%; padding: 20px; } }
@media (max-width: 768px) { .gray_prolist .wrapper .oneset .textcon .t1 { font-size: 20px; }
  .gray_prolist .wrapper .oneset .textcon .t2 { font-size: 14px; } }
@media (max-width: 600px) { .gray_prolist .wrapper .oneset { width: 100%; } }
.productlist { padding: 25px 0; }
.productlist .wrapper { display: flex; flex-wrap: wrap; max-width: 1540px; }
.productlist .wrapper .oneset { width: 50%; padding: 25px 10px; }
.productlist .wrapper .oneset .onesetin { display: flex; flex-wrap: wrap; }
.productlist .wrapper .oneset .onesetin:hover .photo .pic img { transform: scale(1.1) rotate(2deg); }
.productlist .wrapper .oneset .photo { width: 50%; overflow: hidden; }
.productlist .wrapper .oneset .photo .pic { height: 0; text-align: center; position: relative; display: block; overflow: hidden; padding-bottom: calc((228/331)*100%); }
.productlist .wrapper .oneset .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; transition: 0.5s; }
.productlist .wrapper .oneset .content { width: 50%; font-weight: bold; padding-top: 35px; padding-left: 55px; position: relative; padding-right: 40px; }
.productlist .wrapper .oneset .content:after { height: 50%; width: 1px; content: ""; background: #c8c8c8; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); }
.productlist .wrapper .oneset .content .pro_title { font-size: 22px; color: #a05900; position: relative; }
.productlist .wrapper .oneset .content .pro_title:before { content: ""; width: 40px; height: 5px; background-color: #a05900; position: absolute; left: -76px; top: 12px; }
.productlist .wrapper .oneset .content .pro_content { font-size: 18px; color: #535353; margin-top: 15px; line-height: 1.6; }

@media (max-width: 1024px) { .productlist .wrapper .oneset { width: 100%; } }
@media (max-width: 480px) { .productlist .wrapper .oneset .photo { width: 100%; }
  .productlist .wrapper .oneset .content { width: 100%; padding-top: 15px; padding-left: 25px; padding-right: 20px; }
  .productlist .wrapper .oneset .content .pro_content { margin-top: 10px; } }
.prolistB { padding: 30px 0; }
.prolistB .wrapper { max-width: 1550px; display: flex; flex-wrap: wrap; }
.prolistB .wrapper .oneset { width: calc(100% / 3); padding: 26px; }
.prolistB .wrapper .oneset .onesetin { display: block; }
.prolistB .wrapper .oneset .onesetin:hover .pic img { transform: scale(1.1) rotate(2deg); }
.prolistB .wrapper .oneset .onesetin .pic { height: 0; text-align: center; position: relative; display: block; overflow: hidden; padding-bottom: calc((353/467)*100%); overflow: hidden; }
.prolistB .wrapper .oneset .onesetin .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; transition: 0.5s; }

@media (max-width: 600px) { .prolistB .wrapper .oneset { width: 100%; padding: 10px; } }
.alphabet { display: flex; flex-wrap: wrap; padding-bottom: 80px; }
.alphabet .oneset { width: 20%; padding: 8px; }
.alphabet .oneset .onesetin { border: 1px dotted #6f6f6f; padding: 20px 20px 30px 20px; height: 100%; }
.alphabet .oneset .onesetin .en_num { display: inline-block; color: #fff; font-size: 18px; padding: 6px 8px 3px 8px; background-color: #535353; margin-bottom: 18px; }

.alphabet .oneset .onesetin .item, .alphabet .oneset .onesetin .txtcon{ text-align: center; }
.alphabet .oneset .onesetin .title{ font-size: 22px; color:#a05900; }
.alphabet .oneset .onesetin .txtcon { font-size: 16px; font-weight: bold; color: #535353; line-height: 1.5; }

@media (max-width: 768px) { .alphabet .oneset { width: calc(100% / 3); }
  .alphabet .oneset .onesetin .txtcon { font-size: 16px; } }
@media (max-width: 480px) { .alphabet .oneset { width: calc(100% / 2); }
  .alphabet .oneset .onesetin { padding: 15px; } }
.eqimg { background: url(../images/eq_bg1.png) center center; background-size: cover; text-align: center; padding: 90px 0; }
.eqimg img { display: inline-block; max-width: 100%; }

.eqcon_box { display: flex; flex-wrap: wrap; padding-bottom: 94px; }
.eqcon_box .oneset { width: 50%; padding: 16px; }
.eqcon_box .oneset .onesetin { background-color: #f7f7f7; padding: 20px 40px; }
.eqcon_box .oneset .onesetin ul li { padding: 20px 5px 8px 5px; font-size: 16px; border-bottom: 1px solid #d2d2d2; list-style: none; }
.eqcon_box .oneset .onesetin ul li:nth-child(1) { font-size: 18px; border-bottom: 2px solid #0067b7; }

@media (max-width: 600px) { .eqcon_box .oneset { width: 100%; padding: 5px; }
  .eqcon_box { padding-bottom: 30px; } }
.ser3twopart { display: flex; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; padding: 70px 0; justify-content: space-between; align-items: center; }
.ser3twopart .leftbox { width: 48%; }
.ser3twopart .leftbox img { width: 100%; }
.ser3twopart .rightbox { width: 48%; line-height: 2; }
.ser3twopart .rightbox .t1 { font-size: 24px; color: #000000; }
.ser3twopart .rightbox .bottxt { color: #797b75; font-size: 20px; }

@media (max-width: 600px) { .ser3twopart { padding: 20px 0; }
  .ser3twopart .leftbox { width: 100%; }
  .ser3twopart .rightbox { width: 100%; margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; }
  .ser3twopart .rightbox .t1 { font-size: 22px; }
  .ser3twopart .rightbox .bottxt { font-size: 16px; } }
.cerboxlist { background: #f7f7f7; padding: 20px 0 40px 0; }
.cerboxlist .wrapper { max-width: 1440px; }
.cerboxlist .oneset { /*align-items: center;*/ display: flex; flex-wrap: wrap; padding: 30px 0; border-bottom: 1px solid #d2d2d2; }
.cerboxlist .oneset .photo { width: 196px; background-color: #fff; border: 1px solid #f0f0f0; padding: 20px; }
.cerboxlist .oneset .photo .pic { height: 0; text-align: center; position: relative; display: block; overflow: hidden;/* padding-bottom: 100%;*/  padding-bottom: 75%; }
.cerboxlist .oneset .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;*/ max-width: 100%; width: initial; }
.cerboxlist .oneset .txt { font-size: 18px; color: #535353; /*line-height: 2;*/ line-height: 1.75; width: calc(100% - 196px); padding-left: 20px; padding-top: 10px; /*padding-top: 30px;*/ }

@media (max-width: 480px) { .cerboxlist .oneset .photo { width: 100%; }
  .cerboxlist .oneset .txt { width: 100%; } }
.newslist { padding: 30px; display: flex; flex-wrap: wrap; }
.newslist .oneset { width: 50%; padding: 25px; }
.newslist .oneset .onesetin { display: block; border: 1px solid #787878; padding: 40px; }
.newslist .oneset .onesetin:hover { opacity: 0.6; }
.newslist .oneset .onesetin .date { font-size: 16px; color: #535353; margin-bottom: 20px; }
.newslist .oneset .onesetin .newstitle { font-size: 22px; color: #000000; margin-bottom: 30px; }
.newslist .oneset .onesetin .context { font-size: 18px; color: #535353; line-height: 2; }

@media (max-width: 768px) { .newslist .oneset { width: 100%; padding: 15px; } }
@media (max-width: 480px) { .newslist .oneset { padding: 15px; }
  .newslist .oneset .onesetin { padding: 20px; }
  .newslist { padding: 0px; } }
.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: 18px; font-weight: 100; text-align: center; margin: 0 3px; text-decoration: none; padding: 10px 14px 8px 14px; color: #424242; border: 1px solid #424242; font-family: "Arial"; margin-bottom: 10px; }
.page_box .page_num.active, .page_box .page_num:hover { background: #424242; color: #fff; }
.page_box .page_num.page_arrow { color: #aaa; font-size: 18px; font-family: "Fontawesome"; }
.page_box .page_num.page_arrow i { font-style: normal; }
.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; }

@media (max-width: 500px) { .page_box .page_num { font-size: 0.8rem; margin: 0 3px; padding: 5px 8px; }
  .page_box .page_num.page_arrow { font-size: 13px; } }
.news_detail_head { border-top: 2px solid #0a0205; border-bottom: 1px solid #0a0205; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.news_detail_head .news_title { font-size: 22px; width: calc(100% - 102px); padding: 20px; }
.news_detail_head .monthdate { width: 102px; padding: 15px; background: #a05900; color: #fff; font-family: 'jf-openhuninn'; text-align: center; }
.news_detail_head .monthdate .year { font-size: 18px; }
.news_detail_head .monthdate .ddate { font-size: 30px; }

@media (max-width: 480px) { .news_detail_head .news_title { font-size: 18px; padding: 16px 15px 16px 0px; }
  .news_detail_head .monthdate { width: 90px; padding: 15px; }
  .news_detail_head .monthdate .year { font-size: 14px; }
  .news_detail_head .monthdate .ddate { font-size: 24px; } }
.htmleditor { padding: 30px 0; font-size: 18px; color: #535353; }

.backpre { text-align: center; padding: 30px 0; }

.backbtn { display: inline-block; padding: 15px 25px; font-size: 18px; color: #424242; border: 1px solid #424242; background-color: white; font-family: Microsoft JhengHei; }
.backbtn:hover { color: #fff; background: #424242; }

.enquiry_list { padding: 30px 60px 60px 60px; }
.enquiry_list .enquiry_list_table_out { border: 1px solid #d4d4d4; border-bottom: 5px solid #cdcdcd; }
.enquiry_list .enquiry_list_table { width: 100%; border-bottom: 1px solid #bebebe; }
.enquiry_list .enquiry_list_table:nth-child(even) { background: #e9dccd; }
.enquiry_list .enquiry_list_table:nth-child(odd) { background: #ffffff; }
.enquiry_list .enquiry_list_table:nth-child(odd) .enquiry_list_tr .el_td .el_td_detail { background: #f9f9f9; }
.enquiry_list .enquiry_list_table:nth-child(1) { background-color: #eeeeee; }
.enquiry_list .enquiry_list_table:nth-child(1) .enquiry_list_tr .el_td:after { display: none; }
.enquiry_list .enquiry_list_table .enquiry_list_tr { display: flex; flex-wrap: wrap; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .mshow { display: none; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td { padding: 25px 40px; font-size: 18px; position: relative; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:after { content: ""; width: 1px; height: 60%; display: block; background: #898989; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(1) { width: 156px; text-align: center; display: flex; flex-wrap: wrap; align-items: center; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(2) { width: calc(100% - 156px - 124px); }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(3) { width: 124px; text-align: center; display: flex; flex-wrap: wrap; align-items: center; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(3):after { display: none; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td .el_td_title { color: #000000; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td .el_td_detail { font-family: Microsoft JhengHei; font-size: 16px; background: #ebe2d9; padding: 10px; margin-top: 5px; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td .el_td_detail textarea { background: none; border: none; height: 80px; width: 100%; }
.enquiry_list .enquiry_list_table .enquiry_list_tr .el_td .deletbtn { border: none; background: none; }

@media (max-width: 768px) { .enquiry_list { padding: 20px 0px 20px 0px; } }
@media (max-width: 550px) { .enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(1) { width: 100%; justify-content: center; }
  .enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(2) { width: 100%; }
  .enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:nth-child(3) { width: 100%; justify-content: center; }
  .enquiry_list .enquiry_list_table .enquiry_list_tr .el_td.mhidden { display: none !important; }
  .enquiry_list .enquiry_list_table .enquiry_list_tr .mshow { display: block; padding: 15px; text-align: center; font-size: 20px; width: 100%; }
  .enquiry_list .enquiry_list_table .enquiry_list_tr .el_td { padding: 15px 20px; }
  .enquiry_list .enquiry_list_table .enquiry_list_tr .el_td:after { display: none; }
  .enqui_form form .enqui_table tbody tr td { font-size: 16px; }
  .enqui_form form .enqui_table tbody tr td:first-child { width: 100px; } }
.enqui_form { max-width: 1360px; margin: 70px auto; }
.enqui_form .enqui_btxt { font-size: 24px; color: #333333; margin-bottom: 30px; }
.enqui_form form .enqui_table { width: 100%; }
.enqui_form form .enqui_table tbody tr td { padding: 5px; color: #585858; font-size: 18px; }
.enqui_form form .enqui_table tbody tr td :nth-child(1) { color: #7b7b7b; }
.enqui_form form .enqui_table tbody tr td .inputstyle{
  border-width: 0 0 1px 0;
  background-color: #fff;
}

.enqui_form form .enqui_table tbody tr td .mustneed { color: #a05900; margin-right: 3px; }
.enqui_form form .sentenquiry { width: 100%; background: #a05900; color: #fff; text-align: center; padding: 15px; border: none; margin-top: 20px; font-size: 20px; font-family: Microsoft JhengHei; }

.enqui_form .vefify{ margin-top: 1rem; }

.inputstyle { border: 1px solid #aaaaaa; width: 100%; padding: 10px; }

.googlemap { width: 100%; }
.googlemap iframe { width: 100%; height: 430px; display: block; }

.contact_twopart { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1370px; margin: 30px auto; padding: 40px 0; }
.contact_twopart .leftbox { width: 46%; }
.contact_twopart .leftbox .toptxt { margin-bottom: 50px; color: #535353; line-height: 2; font-size: 18px; }
.contact_twopart .leftbox .iconset .oneset { display: flex; flex-wrap: wrap; align-items: center; margin: 30px; }
.contact_twopart .leftbox .iconset .oneset .iconout { width: 85px; height: 85px; border: 1px solid #a05900; border-radius: 100%; padding: 4px; }
.contact_twopart .leftbox .iconset .oneset .iconout .iconin { background-color: #a05900; width: 75px; height: 75px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: 100%; }
.contact_twopart .leftbox .iconset .oneset .rightinfo { width: calc(100% - 85px); padding-left: 20px; }
.contact_twopart .leftbox .iconset .oneset .rightinfo .t1 { color: #a05900; font-size: 18px; margin-bottom: 8px; }
.contact_twopart .leftbox .iconset .oneset .rightinfo .t2 { font-size: 20px; color: #000000; }
.contact_twopart .rightbox { width: 46%; }
.contact_twopart .rightbox .contacttable { width: 100%; }
.contact_twopart .rightbox .contacttable .mustneed { color: #a05900; }
.contact_twopart .rightbox .contacttable .topt { text-align: right; color: #535353; font-size: 14px; padding: 0 10px 10px 0; }
.contact_twopart .rightbox .contacttable form .contactform { margin-bottom: 15px; }
.contact_twopart .rightbox .contacttable form .contactform .oneset { background-color: #eeeeee; padding: 10px 15px; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5px; }
.contact_twopart .rightbox .contacttable form .contactform .oneset .con_title { width: 85px; color: #706f6f; font-size: 16px; }
.contact_twopart .rightbox .contacttable form .contactform .oneset .con_input { width: calc(100% - 85px); }
.contact_twopart .rightbox .contacttable form .contactform .oneset .con_input .inputstyle { border: none; background: none; width: 100%; }
.contact_twopart .rightbox .contacttable form .vefify { margin-bottom: 15px; }
.contact_twopart .rightbox .contacttable form .sentbtn { color: #fff; background: #00b3ea; font-size: 20px; text-align: center; padding: 10px; width: 100%; border: none; }

@media (max-width: 1024px) { .contact_twopart { padding-top: 20px; }
  .contact_twopart .leftbox .iconset .oneset { margin: 30px 0px; }
  .contact_twopart .leftbox .iconset .oneset .rightinfo .t2 { font-size: 18px; } }
@media (max-width: 768px) { .contact_twopart .leftbox { width: 100%; }
  .contact_twopart .rightbox { width: 100%; } }
@media (max-width: 480px) { .contact_twopart .leftbox .iconset .oneset .rightinfo .t2 { font-size: 16px; }
  .contact_twopart .leftbox .iconset .oneset .iconout { width: 60px; height: 60px; }
  .contact_twopart .leftbox .iconset .oneset .iconout .iconin { width: 50px; height: 50px; }
  .contact_twopart .leftbox .toptxt { font-size: 16px; } }
.prod_tabs { width: 100%; background-color: #eeeeee; margin-bottom: 50px; }
.prod_tabs .prod_tabs_in { max-width: 1600px; margin: 0 auto; border-top: 2px solid #000; border-bottom: 1px solid #000; }
.prod_tabs .prod_tabs_in .prod_tabs_ul { padding: 0 20px; display: flex; flex-wrap: wrap; }
.prod_tabs .prod_tabs_in .prod_tabs_ul li { list-style: none; }
.prod_tabs .prod_tabs_in .prod_tabs_ul li a { padding: 25px; display: inline-block; color: #606060; font-size: 20px; position: relative; }
.prod_tabs .prod_tabs_in .prod_tabs_ul li a:after { content: ""; display: block; width: 1px; height: 20px; background: #a05900; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); }
.prod_tabs .prod_tabs_in .prod_tabs_ul li a.active, .prod_tabs .prod_tabs_in .prod_tabs_ul li a:hover { color: #a05900; }
.prod_tabs .prod_tabs_in .prod_tabs_ul li a.active:before, .prod_tabs .prod_tabs_in .prod_tabs_ul li a:hover:before { bottom: -6px; left: 50%; transform: translate(-50%, 0); position: absolute; content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 6.5px 0 6.5px; border-color: #606060 transparent transparent transparent; }

.tabdetail { max-width: 1270px; margin: 30px auto; padding: 0 20px; }
.tabdetail .prodetailcon { margin-bottom: 40px; }
.tabdetail .prodetailcon .prodtop { display: flex; flex-wrap: wrap; }
.tabdetail .prodetailcon .prodtop .leftBox { width: 45%; padding-right: 4%; }
.tabdetail .prodetailcon .prodtop .leftBox .mainproinphoto { width: 100%; margin-bottom: 10px; }
.tabdetail .prodetailcon .prodtop .leftBox .mainproinphoto .oneset { background: #eeeeee; padding: 2%; }
.tabdetail .prodetailcon .prodtop .leftBox .mainproinphoto .oneset .pic { width: 100%; height: 0; text-align: center; position: relative; display: block; overflow: hidden; padding-bottom: calc((320/550)*100%); }
.tabdetail .prodetailcon .prodtop .leftBox .mainproinphoto .oneset .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; max-width: 100%; width: initial; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto { padding: 0 20px; position: relative; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .oneset { padding: 5px; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .oneset .onesetin { background: #eeeeee; padding: 10px; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .oneset .pic { height: 0; text-align: center; position: relative; display: block; overflow: hidden; padding-bottom: 100%; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .oneset .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; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .parrow { position: absolute; top: 50%; transform: translate(0, -50%); font-size: 18px; line-height: 1; cursor: pointer; transition: 0.3s; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .parrow:hover { opacity: 0.3; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .parrow i { font-style: normal; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .parrow.aleft { left: 0; }
.tabdetail .prodetailcon .prodtop .leftBox .smallproinphoto .parrow.aright { right: 0; }
.tabdetail .prodetailcon .prodtop .rightBox { width: 55%; padding-top: 25px; }
.tabdetail .prodetailcon .prodtop .rightBox .prodtitle { font-size: 30px; color: #a05900; margin-bottom: 12px; }
.tabdetail .prodetailcon .prodtop .rightBox .prodsubtitle { color: #535353; font-size: 20px; margin-bottom: 50px; }
.tabdetail .prodetailcon .prodtop .rightBox .prodtec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.tabdetail .prodetailcon .prodtop .rightBox .prodtec .protecbox { /*width: 43px;*/ width: 5.5em; margin-right: 1em; font-size: 20px; padding-bottom: 3px; padding-top: 15px; margin-bottom: 15px;color: #000; border-bottom: 2px solid #494848; }
.tabdetail .prodetailcon .prodtop .rightBox .prodtec .protec_rightbox { color: #535353; font-size: 20px; line-height: calc(36/20); padding-left: 35px; flex: 1; width: calc(100% - 80px); font-family: Microsoft JhengHei; padding: 20px 0; border-bottom: 1px dotted #acacac; }
.tabdetail .prodetailcon .prodtop .rightBox .prodtec .protec_rightbox a { border-bottom: 1px solid #acacac; }
.tabdetail .prodetailcon .prodbot { width: 100%; }
.tabdetail .prodetailcon .prodbot .table_overfllow { width: 100%; overflow-x: auto; margin-bottom: 10px; }
.tabdetail .prodetailcon .prodbot .table_overfllow::-webkit-scrollbar { background-color: transparent; height: 5px; }
.tabdetail .prodetailcon .prodbot .prodbot_table { border: 1px solid #d2d2d2; font-family: Microsoft JhengHei; margin-top: 40px; margin-bottom: 15px; width: 100%; min-width: 1072px; }
.tabdetail .prodetailcon .prodbot .prodbot_table tbody tr:nth-child(even) td { background: #e9dccd; }
.tabdetail .prodetailcon .prodbot .prodbot_table tbody tr th, .tabdetail .prodetailcon .prodbot .prodbot_table tbody tr td { padding: 15px 25px; }
.tabdetail .prodetailcon .prodbot .prodbot_table tbody tr th { background: #eeeeee; font-size: 14px; color: #5e5e5e; text-align: left; vertical-align: top; }
.tabdetail .prodetailcon .prodbot .prodbot_table tbody tr td { font-size: 16px; color: #000000; }
.tabdetail .prodetailcon .prodbot .linktoinquiry { text-align: right; margin-right: 25px; }
.tabdetail .prodetailcon .prodbot .linktoinquiry .linktoinquiry_link { font-size: 20px; color: #a05900; }

@media (max-width: 767px) { .tabdetail .prodetailcon .prodtop .leftBox { width: 100%; padding-right: 0; }
  .tabdetail .prodetailcon .prodtop .rightBox { width: 100%; padding-top: 30px; }
  .tabdetail .prodetailcon .prodtop .rightBox .prodtitle { font-size: 24px; margin-bottom: 0; }
  .tabdetail .prodetailcon .prodtop .rightBox .prodtec .protecbox { font-size: 18px; }
  .tabdetail .prodetailcon .prodtop .rightBox .prodtec .protec_rightbox { font-size: 16px; }
  .prod_tabs .prod_tabs_in .prod_tabs_ul li a.active:before, .prod_tabs .prod_tabs_in .prod_tabs_ul li a:hover:before { display: none; }
  .prod_tabs .prod_tabs_in .prod_tabs_ul li a { padding: 20px 15px; font-size: 16px; }
  .prod_tabs .prod_tabs_in .prod_tabs_ul { padding: 0 10px; } }

/* 0811 技術 */
.all_text {
  line-height: 1.875;
  font-size: 16px;
  font-weight: 100;
}

.all_title4 {
  font-size: 20px;
  font-weight: 400;
}

.tech_platform_list{
  max-width: 100%;
  margin: 25px auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.tech_platform_list li {
  width: 22.75%;
  position: relative;
  list-style: none;
  margin-left: 1rem;
  margin-right: 1rem;
}

.tech_platform_list .circle {
  width: 100%;
  padding-top: calc(100% + 1px);
  position: relative;
  border-radius: 50%;
  pointer-events: none;
  overflow: visible;
}

.tech_platform_list .circle .number {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #000;
  opacity: 1;
  transition: opacity 0.4s 0.5s ease;
}

.tech_platform_list .circle ._main {
  width: 90%;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
  transition: opacity 0.4s 0.5s ease;
}
.tech_platform_list .circle .all_title4 {
  letter-spacing: 0;
  color: #000;
  opacity: 1;
  transition: opacity 0.4s 0.5s ease;
}

.tech_platform_list .circle .all_text {
  margin-top: 5px;
  color: #000;
  opacity: 1;
  transition: opacity 0.4s 0.5s ease;
  font-weight: 400;
}

.tech_platform_list .circle .circle_border {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
}

.tech_platform_list .circle .circle_border svg {
  width: 100%;
  height: 100%;
}

.tech_platform_list .circle *{
  position: relative;
  z-index: 2;
  color:#fff !important
}

/* .tech_platform_list .circle::before {
  content: "";
  background: url(../images/all_long_arrow.png) no-repeat center/81px 11px;
  width: 81px;
  height: 11px;
  position: absolute;
  left: 108%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  opacity: 1;
  transition: opacity 0.4s 0.5s ease;
} */

.tech_platform_list .circle::after {
  content: '';
  display: block;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background-color: #645957;
  border-radius: 50%;
  position: absolute;
  left: 25px;
  top: 25px;
  z-index: 1;
}

.tech_platform_list .bottom {
  max-width: 256px;
  margin: 0 auto;
  padding-top: 78px;
  position: relative;
  opacity: 1;
  transition: opacity 0.4s 0.5s ease;
}

.tech_platform_list .bottom::after {
  content: "";
  background: #fff;
  width: 2px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 28px;
  display: block;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-shadow: #000 0 8px 0 0, #000 0 16px 0 0, #000 0 24px 0 0;
  box-shadow: #000 0 8px 0 0, #000 0 16px 0 0, #000 0 24px 0 0;
}

.tech_platform_list .bottom .all_text {
  color: #000;
  font-weight: 100;
}

.animationItem {
  transform: translate3d(-50px, 0, 0);
  opacity: 0;
  transition: 0.85s cubic-bezier(0.31, 1.26, 0.19, 1.11);
}

.animationItem.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.tech_platform_list li.anime.animationItem .circle .circle_border circle {
  stroke: #000;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 0, 5;
  fill: none;
  opacity: 0;
  transition: stroke-dasharray 5s ease;
}

.tech_platform_list li.anime.animationItem.animated .circle .circle_border circle{
  stroke-dasharray: 0, 13;
  opacity: 1;
}

@media (min-width:1001px){
  .tech_platform_list .circle .all_text{
    font-size: 1.1vw;
  }
}

@media (max-width: 1000px){
  .tech_platform_list {
    flex-wrap: wrap;
  }
  
  .tech_platform_list li {
    width: 32.5%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .tech_platform_list .circle::after {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 10px;
    top: 10px;
  }
}

@media (max-width: 640px){
  .tech_platform_list li {
    width: 45.5%;
  }
}

/* 線上型錄列表 */
.catalogTitle{
  margin-bottom: 0;
}

.cataloglist .wrapper .oneset .photo .pic img{
  width: auto;
}

.cataloglist .wrapper .oneset .content::after {
  display: none;
}

.cataloglist .wrapper .oneset .onesetin {
  display: flex;
}

.cataloglist .wrapper .oneset .photo,
.cataloglist .wrapper .oneset .content {
  width: 100%;
}

.cataloglist .wrapper .oneset .content {
  padding-top: 11px;
  padding-left: 75px;
}
@media (min-width:1001px){
  .cataloglist .wrapper .oneset {
    width: 25%;
  }
}

@media (max-width:640px){
  .cataloglist{
    padding-top: 0;
  }
}

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