/* Reset ====================================================================== */
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

body, div, dl, menu, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, blockquote, th, td, figure { margin: 0; padding: 0; }

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

svg:not(:root) { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: inherit; }

input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; vertical-align: baseline; *vertical-align: middle; outline: none; border: none; }

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

input, button, textarea, select { *font-size: 100%; }

ol, ul, li, menu { list-style: none; }

a { color: inherit; text-decoration: none; -webkit-transition: all .5s; transition: all .5s; }

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

*:focus, input, input:focus, textarea, textarea:focus, button, select { outline: none; }

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

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

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

[hidden] { display: none; }

.container { padding-top: constant(safe-area-inset-top); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); }

/* Default ==================================================================== */
html { font-size: 10px; }

body { font-family: Arial, "Microsoft JhengHei", sans-serif; font-size: 1.6rem; line-height: 1.5; letter-spacing: 1px; color: #221814; overflow-x: hidden; opacity: 0; -webkit-animation: opacity_in 1s both; animation: opacity_in 1s both; /* Custom */ background: url("../img/bg.png") repeat-y center; background-size: 100%; padding-top: 109px; font-display: auto; }

@media all and (max-width: 768px) { body { padding-top: 82px; } }

a { cursor: pointer; }

@media all and (min-width: 993px) { a.tel { pointer-events: none; }
  a:hover { opacity: .5; } }

/* Layout ==================================================================== */
@media all and (min-width: 993px) { .main { min-height: 100vh; } }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; }

@media all and (max-width: 992px) { .wrap { max-width: 100%; padding-left: 5%; padding-right: 5%; } }

.wrap--full { max-width: 100%; }

.wrap--path { padding-left: 5%; padding-right: 5%; }

@media all and (max-width: 992px) { [class^="wrap--"] { max-width: 100%; } }

@media all and (max-width: 959px) { .display-pc { display: none !important; } }

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

/* Images ===================================================================== */
/* imgfix Common */
.imgfix { position: relative; padding-bottom: 56.25%; line-height: 0px; -webkit-transition: all 0.5s; transition: all 0.5s; }

.imgfix figure, .imgfix__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; }

.imgfix img, .imgfix__img { width: auto; height: auto; -webkit-transition: all 0.3s; transition: all 0.3s; }

.imgfix__mask { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; pointer-events: none; }

.imgfix--in img { max-width: 100%; max-height: 100%; }

.imgfix--out img { max-width: initial; max-height: initial; }

.imgfix--full img { max-width: initial; height: 100%; }

.imgfix--circle { width: 40%; }

.imgfix--circle figure, .imgfix--circle .imgfix__block { border-radius: 100%; }

/* imgfix Custom  */
/* Banner ===================================================================== */
/* Common Banner */
.banner { line-height: 0; position: relative; }

.banner .wrap { position: relative; padding-left: 0px; padding-right: 0px; min-height: 51px; }

@media all and (max-width: 768px) { .banner .wrap { min-height: 30px; } }

.banner img { width: 100%; }

/* Header ===================================================================== */
header { width: 100vw; position: fixed; top: 0px; left: 0px; z-index: 9999; background: #252525; padding: 10px 0; font-family: "Noto Sans TC", Arial, "Microsoft JhengHei", sans-serif; }

header.js-menuOpen { background: rgba(37, 37, 37, 0.8); }

header .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.logo { -webkit-box-flex: 0; -ms-flex: 0 0 73px; flex: 0 0 73px; margin-left: 35px; }

@media all and (max-width: 768px) { .logo { margin-left: 0px; -ms-flex-preferred-size: 50px; flex-basis: 50px; } }

.logo img { width: 100%; }

.menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

@media all and (max-width: 992px) { .menu { display: none; position: fixed; top: 109px; left: 0px; width: 100%; height: calc(100vh - 109px); background: rgba(37, 37, 37, 0.8); -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; overflow-x: hidden; } }

@media all and (max-width: 768px) { .menu { top: 83px; height: calc(100vh - 83px); } }

.menu-btn { position: fixed; top: 30px; right: 5%; width: 40px; height: 50px; }

@media all and (min-width: 993px) { .menu-btn { display: none; } }

@media all and (max-width: 768px) { .menu-btn { top: 15px; width: 35px; } }

.menu-btn span { display: block; position: absolute; top: calc(50% - 1px); left: 5%; width: 90%; height: 2px; background: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; }

.menu-btn span:first-child { -webkit-transform: translateY(-10px); transform: translateY(-10px); }

.menu-btn span:last-child { -webkit-transform: translateY(10px); transform: translateY(10px); }

.menu-btn.js-open span:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.menu-btn.js-open span:nth-child(2) { opacity: 0; }

.menu-btn.js-open span:last-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.menu-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-size: 1.4rem; color: #898788; margin-bottom: 16px; }

@media all and (max-width: 992px) { .menu-group { color: #fff; margin: 20px 0; padding: 0 15px; padding-bottom: 15px; border-bottom: 1px dotted #ccc; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }

.menu-community { font-size: 1.8em; line-height: 1; margin: 0 -0.52083vw; /* m-20 */ margin-right: 1.04167vw; /* mr 20 */ }

@media all and (max-width: 992px) { .menu-community { margin-bottom: 15px; } }

.menu-community a { padding: 0 0.52083vw; /* p 0 20 */ }

.menu-main { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -1.5625vw; /* m 0 -30 */ }

@media all and (max-width: 992px) { .menu-main { margin: 0px; -ms-flex-wrap: wrap; flex-wrap: wrap; } }

.menu-main > li { padding: 0 1.5625vw; /* p 0 30 */ }

@media all and (max-width: 992px) { .menu-main > li { width: 100%; text-align: center; }
  .menu-main > li:not(:last-child) { margin-bottom: 20px; } }

.menu-main a { color: #fff; font-size: 1.8rem; }

@media all and (min-width: 993px) { .menu-main a:hover { color: #E2BA5B; } }

.menu-main a.current { color: #E2BA5B; }

.menu-dropDown { position: relative; }

.menu-dropDown__btn { width: 50px; height: 100%; display: block; position: absolute; top: 0px; right: 5%; }

@media all and (min-width: 993px) { .menu-dropDown__btn { display: none; } }

.menu-dropDown__btn.js-open::before { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

.menu-dropDown__btn::before, .menu-dropDown__btn::after { position: absolute; top: 15px; left: calc(50% - 5px); content: ''; width: 10px; height: 2px; background: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; }

.menu-dropDown__btn::before { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.menu-dropDown__list { display: none; background: #272528; position: absolute; padding-top: 19px; top: 100%; left: 0px; width: 100%; text-align: center; line-height: 1.1; }

@media all and (max-width: 992px) { .menu-dropDown__list { position: static; padding-top: 0px; background: rgba(0, 0, 0, 0); } }

.menu-dropDown__list::before { content: ''; position: absolute; top: 6px; left: calc(50% - 3px); width: 0px; height: 0px; border-style: solid; border-width: 6px; border-color: #E2BA5B transparent transparent transparent; }

@media all and (max-width: 992px) { .menu-dropDown__list::before { display: none; } }

.menu-dropDown__list > li { padding: 7px 15px; }

@media all and (max-width: 992px) { .menu-dropDown__list > li { padding: 15px; } }

.menu-dropDown__list > li:first-child { border-top: 1px solid #494748; }

@media all and (max-width: 992px) { .menu-dropDown__list > li:first-child { border-color: #fff; } }

.menu-dropDown__list > li:not(:last-child) { border-bottom: 1px solid #494748; }

@media all and (max-width: 992px) { .menu-dropDown__list > li:not(:last-child) { border-bottom: 1px dotted rgba(255, 255, 255, 0.6); } }

@media all and (max-width: 992px) { .menu-dropDown__list > li a { opacity: .7; }
  .menu-dropDown__list > li:last-child { border-bottom: 1px solid #fff; } }

.lang-btn { display: none; }

.lang-options { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -1.04167vw; /* m 0 -20 */ }

.lang-options li { position: relative; padding: 0 1.04167vw; /* p 0 20 */ }

.lang-options li:not(:last-child)::after { content: '/'; position: absolute; top: 0px; right: -0.20833vw; /* r -4 */ }
/*# sourceMappingURL=cms-header.css.map */