/* //////////////////////////////////////////////////////////////////////////// */
/* JhuangPing v.1.0.1 [12.28.2020]                                              */
/* Github: https://jhuangping.github.io                                         */
/* //////////////////////////////////////////////////////////////////////////// */
/*----------------------------------------
Jhuang Ping Reset (c) 
v1.0 | 2018.05.31
----------------------------------------*/
/* Reset ====================================================================*/
body, div, ul, ol, li, form, input, textarea, th, td { margin: 0; padding: 0; }

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

ol, ul { list-style: none; }

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

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

.table_scroll { overflow-x: auto; }

a { text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; }

div { -webkit-box-sizing: border-box; box-sizing: border-box; }

input { outline: none; }

/* Default ====================================================================*/
body { font-family: Arial,'Microsoft JhengHei', sans-serif; font-size: 16px; line-height: 24px; letter-spacing: 0px; color: #000; overflow-x: hidden; color: #525252; }

.wrap { max-width: 1200px; margin: 0 auto; }

.table_scroll { overflow-x: auto; }

.mobile { display: none; }

/* Fonts ======================================================================*/
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: normal; src: url("fonts/oswald/Oswald-Regular.ttf"); src: url("fonts/oswald/Oswald-Regular.ttf") format("truetype"), url("fonts/oswald/Oswald-Light.ttf") format("truetype"), url("fonts/oswald/Oswald-Medium.ttf") format("truetype"), url("fonts/oswald/Oswald-Bold.ttf") format("truetype"), url("fonts/oswald/Oswald-ExtraLight.ttf") format("truetype"), url("fonts/oswald/Oswald-SemiBold.ttf") format("truetype"); }

/* Header =====================================================================*/
header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; }

header .wrap { max-width: 1200px; position: relative; z-index: 99990; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; }

.logo { position: absolute; top: 10px; z-index: 2; color: #fff; }

/* Menu =======================================================================*/
.menu { width: 100%; padding: 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.menu .drop-down { position: relative; }

.menu .menu-list { display: none; position: absolute; }

.menuBtn { width: 40px; height: 30px; cursor: pointer; position: absolute; z-index: 99991; top: 40px; right: 5%; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.menuBtn span { width: 70%; height: 3px; display: block; background: #474747; border-radius: 5px; -webkit-transition: all .2s; transition: all .2s; }

.menuBtn.open span { position: absolute; }

.menuBtn.open span:nth-child(1) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.menuBtn.open span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.menuBtn.open span:nth-child(3) { opacity: 0; }

.menuList { display: none; position: absolute; top: 0px; right: 0px; width: 50px; height: 55px; padding-right: 4%; }

.menuList:before { content: '\f054'; color: #fff; font-family: FontAwesome; position: absolute; top: calc(50% - 12px); right: calc(50% - 5px); display: block; -webkit-transition: all .2s; transition: all .2s; }

.menuList.open:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.menu-down { max-width: 900px; width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; margin-top: 20px; }

.menu-down li { text-align: center; }

.menu-down li:hover a:before, .menu-down li.current a:before { opacity: 1; }

.menu-down a { color: #000; padding: 10px 17px; display: block; position: relative; overflow: hidden; }

.menu-up { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; color: #fff; font-size: 13px; position: absolute; right: 5%; bottom: 15px; }

.menu-up li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 3px; cursor: pointer; }

.menu-up li a { color: #fff; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.menu-up li a span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000; width: 0px; height: 30px; overflow: hidden; -webkit-transition: all .2s; transition: all .2s; }

.menu-up li a:hover { opacity: .5; }

.menu-up li a:hover span { width: auto; }

.menu-up li[class^="mi-"] a:before { font-family: FontAwesome; content: ''; color: #000; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.menu-up li.mi-search a:before { content: url("../images/icon/icon-search.png"); }

.menu-up li.mi-search input { width: 0px; border: none; border-radius: 50px; padding: 0px; background: #B3B3B3; color: #fff; margin-left: 0px; -webkit-transition: all .2s; transition: all .2s; }

.menu-up li.mi-search:hover input { width: 115px; margin-left: 3px; padding: 3px 8px; }

/* Menu Style */
.menuBasic { position: relative; }

.menuBasic .drop-down.menu-product { position: static; }

.menuBasic .menu-list { width: 100%; background: #007399; position: absolute; left: 0px; margin-top: 15px; }

.menuBasic .menu-prolist { max-width: 870px; width: 100%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 38px 0; }

.menuBasic .menu-prolist .list { padding: 0 40px; position: relative; }

.menuBasic .menu-prolist .list a { color: #fff; font-size: 14px; padding: 5px 0; text-align: left; }

.menuBasic .menu-prolist .list a.name { font-size: 16px; border-bottom: 2px solid #6FB0C5; }

.menuBasic .menu-prolist .list a:hover { opacity: .5; }

.menuBasic .menu-prolist .list:after { display: inline-block; background: #73DCFF; position: absolute; top: 1%; right: 0px; width: 1px; height: 98%; content: ''; }

.menuBasic .menu-prolist .list:first-child { padding-left: 0px; }

.menuBasic .menu-prolist .list:last-child { padding-right: 0px; }

.menuBasic .menu-prolist .list:last-child:after { display: none; }

/* Language ===================================================================*/
.lang { font-size: 12px; }

.btn-lang { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; background: #D95022; width: 30px; height: 30px; border-radius: 100%; text-transform: uppercase; -webkit-transition: all .2s; transition: all .2s; }

.btn-lang:hover { -webkit-box-shadow: 0 0 3px #000 inset; box-shadow: 0 0 3px #000 inset; }

.lang-en { background: url("../images/lang/lang-en.png") no-repeat center; }

.lang-tw { background: url("../images/lang/lang-tw.png") no-repeat center; }

.lang-chs { background: url("../images/lang/lang-chs.png") no-repeat center; }

.lang-options { display: none; position: absolute; top: 40px; }

.lang-options a { display: block; width: 30px; height: 30px; margin: 3px 0; border-radius: 100%; -webkit-transition: all .2s; transition: all .2s; }

@media only screen and (max-width: 1100px) { header .wrap { padding: 0 10%; }
  .wrap { padding: 0 10%; } }

@media only screen and (max-width: 1024px) { .logo { position: relative; margin-left: 20px; padding: 20px 0; }
  header .wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition: all 1s; transition: all 1s; padding: 0px; }
  .menu { display: none; width: 100%; padding: 0px; position: absolute; top: 100px; }
  .menuBtn { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .menuList { display: block; }
  .menu-down { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 1024px; }
  .menu-down li { position: relative; width: 100%; text-align: left; }
  .menu-down a { padding: 15px 12px; text-transform: capitalize; background: #007399; color: #fff; border-bottom: 1px solid #6FB0C5; }
  .menu-down a:before { display: block; bottom: -3px; opacity: 1; background-size: 100%; }
  .menu-up { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; font-size: 15px; right: calc(5% + 50px); top: 40px; bottom: auto; }
  .menu-up li.search { padding: 40px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; }
  .menu-up li.search input { width: 40%; margin-left: 6px; padding: 3px 8px; background: #fff; color: #252525; }
  .menu-up li.search:hover input { width: 40%; }
  .menu-up li:last-child { padding-left: 0px; }
  .menu-up li:last-child:before { display: none; }
  .menuBasic .drop-down.menu-product { position: relative; }
  .menuBasic .menu-list { position: static; margin-top: 0px; }
  .menuBasic .menu-prolist { max-width: 1024px; padding: 0px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .menuBasic .menu-prolist .list { padding: 0px; }
  .menuBasic .menu-prolist .list a { display: none; padding: 15px 12px; font-size: 16px; background: #005C7B; border-bottom: none !important; }
  .menuBasic .menu-prolist .list a.name { display: block; }
  .menuBasic .menu-prolist .list:after { display: none; }
  .btn-lang { display: none; }
  .lang-options { position: static; width: 100%; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-pack: distribute; justify-content: space-around; } }

@media only screen and (max-width: 768px) { .mobile { display: block; }
  .pc { display: none; } }

/* Add Style [2020.02.09] ----------------------------------------------------- */
@font-face { font-family: 'SFIntellivisedExtended'; font-style: normal; font-weight: normal; src: url("fonts/SFIntellivisedExtended/SFIntellivisedExtended.ttf"); src: url("fonts/SFIntellivisedExtended/SFIntellivisedExtended.ttf") format("truetype"); }

/* style */
.style-none { margin: 0; padding: 0; list-style: none; }

/* txt */
.txt-left { text-align: left; }

.txt-center { text-align: center; }

.txt-right { text-align: right; }

/* scroll */
.scroll-no { overflow: hidden; }

.scroll-x { overflow-y: hidden; }

.scroll-y { overflow-x: hidden; }

/* display */
@media all and (max-width: 992px) { .show-pc, .display-pc { display: none !important; } }

@media all and (min-width: 993px) { .show-mobile, .display-mobile { display: none !important; } }

/* Javascript */
[data-img] { background-repeat: no-repeat; }

.js-img--full { background-size: cover; }

.js-img--hold { background-size: auto 100%; }

.js-img--config { background-position: center; }

/* container */
.ctr, .container { margin: 0 auto; width: 100%; max-width: 1230px; padding-left: 15px; padding-right: 15px; }

.ctr--w1215, .container--w1215 { max-width: 1245px; padding-left: 15px; padding-right: 15px; }

.ctr--w1195, .container--w1195 { max-width: 1225px; padding-left: 15px; padding-right: 15px; }

.ctr--w1165, .container--w1165 { max-width: 1195px; padding-left: 15px; padding-right: 15px; }

.ctr--w1055, .container--w1055 { max-width: 1085px; padding-left: 15px; padding-right: 15px; }

.ctr--w1045, .container--w1045 { max-width: 1075px; padding-left: 15px; padding-right: 15px; }

.ctr--w1024, .container--w1024 { max-width: 1054px; padding-left: 15px; padding-right: 15px; }

.ctr--w1000, .container--w1000 { max-width: 1030px; padding-left: 15px; padding-right: 15px; }

.ctr--full, .ctr--max, .container--full, .container--max { max-width: 100%; padding-left: 0px; padding-right: 0px; }

.ctr--html, .container--html { max-width: 100%; min-width: 320px; padding-left: 0px; padding-right: 0px; overflow: hidden; }

/* Grid */
.gd, .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.gd--row2 > *, .grid--row2 > * { width: calc(100%/2); }

@media all and (max-width: 480px) { .gd--row2 > *, .grid--row2 > * { width: 100%; } }

.gd--row3 > *, .grid--row3 > * { width: calc(100%/3); }

@media all and (max-width: 992px) { .gd--row3 > *, .grid--row3 > * { width: 50%; } }

@media all and (max-width: 480px) { .gd--row3 > *, .grid--row3 > * { width: 100%; } }

.gd--row4 > *, .grid--row4 > * { width: calc(100%/4); }

@media all and (max-width: 1366px) { .gd--row4 > *, .grid--row4 > * { width: calc(100%/3); } }

@media all and (max-width: 992px) { .gd--row4 > *, .grid--row4 > * { width: 50%; } }

@media all and (max-width: 480px) { .gd--row4 > *, .grid--row4 > * { width: 100%; } }
/*# sourceMappingURL=cms-header.css.map */