@charset "UTF-8";
/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* -----RESET---------------- */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, select, textarea, button, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

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

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

sub { vertical-align: sub; font-size: smaller; }

sup { vertical-align: super; font-size: smaller; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

input, select, textarea { -webkit-appearance: none; appearance: none; }

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

select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

input[type="search"], input[type="search"]:hover, input[type="search"]:focus, input[type="search"]:active { -webkit-appearance: none; }

select::-ms-expand { display: none; }

button, input[type="submit"], input[type="reset"] { background: none; cursor: pointer; }

option { background-color: transparent; }

img { display: block; border: none; width: auto; height: auto; max-width: 100%; max-height: 100%; }

/* ---------BLOCK------------ */
.w95 { width: 95%; margin: 0 auto; }

.w600, .w900, .w1000, .w1200, .w1300, .w1366 { width: 90%; margin: 0 auto; }

.w600 { max-width: 600px; }

.w900 { max-width: 900px; }

.w1000 { max-width: 1000px; }

.w1200 { max-width: 1200px; }

.w1300 { max-width: 1300px; }

.w1366 { max-width: 1366px; }

.col100, .col90, .col80, .col75, .col70, .col66, .col60, .col50, .col40, .col33, .col30, .col25, .col20, .col15, .col10, .col05 { display: inline-block; vertical-align: top; }

.col100 { width: 100%; }

.col90 { width: 90%; }

.col80 { width: 80%; }

.col75 { width: 75%; }

.col70 { width: 70%; }

.col66 { width: 66.6666%; }

.col60 { width: 60%; }

.col55 { width: 55%; }

.col50 { width: 50%; }

.col45 { width: 45%; }

.col40 { width: 40%; }

.col30 { width: 30%; }

.col33 { width: 33.3333%; }

.col25 { width: 25%; }

.col20 { width: 20%; }

.col15 { width: 15%; }

.col10 { width: 10%; }

.col05 { width: 05%; }

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

.ib-top { display: inline-block; vertical-align: top; }

.flex-nowrap { display: flex; flex-wrap: nowrap; }

.flex-wrap { display: flex; flex-wrap: wrap; }

.align-items-center { align-items: center; }

.align-items-start { align-items: flex-start; }

.align-items-end { align-items: flex-end; }

.justify-content-center { justify-content: center; }

.justify-content-start { justify-content: flex-start; }

.justify-content-end { justify-content: flex-end; }

.justify-content-between { justify-content: space-between; }

.justify-content-around { justify-content: space-around; }

.reverse { flex-direction: row-reverse; }

.float-left { display: block; float: left; margin-left: 0; }

.float-right { display: block; float: right; margin-left: 0; }

.cf:after { content: ''; display: table; clear: both; }

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.4); margin: 20px 0; }
hr.hr-grey { border-top: 1px solid rgba(0, 0, 0, 0.1); }

.d-block { display: block; }

.d-none { display: none; }

/* -------------RWD--------------- */
@media screen and (max-width: 1440px) { .w1366 { width: 95%; } }
@media screen and (max-width: 768px) { .d-md-none { display: none !important; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
  .w800, .w900 { width: 90%; } }
@media screen and (max-width: 480px) { hr { margin: 10px 0; } }
/*----lightbox---------*/
/* -------------SELECTION--------- */
::selection { background: rgba(0, 168, 153, 0.5); color: #fafafa; }

::-moz-selection { background: rgba(0, 168, 153, 0.5); color: #fafafa; }

/* -------------MAIN-------------- */
body { opacity: 0; background: white; transform-origin: center top; -moz-transition: opacity 1s ease, transform 1s ease; -o-transition: opacity 1s ease, transform 1s ease; -webkit-transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease; margin-top: 70px; }
body.loaded { opacity: 1; }

img.lazyload { opacity: 0; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }

/* -------------HEADER------------ */
#header .container, #header_menu, #header_nav, #header_lang, #footer .title nav, #footer .title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

#header { width: 100%; padding: .875rem 0; background: white; position: fixed; top: 0; left: 0; z-index: 5; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
#header.fixed { padding: .5rem 0; border-bottom: 1px solid #E5E5E5; }
#header .container { flex-wrap: nowrap; }

#header_logo { display: block; max-width: 230px; }

#header_nav, #header_lang, #footer .title nav { font-size: 20px; font-weight: 400; }
#header_nav a, #header_lang a, #footer .title nav a { padding: 1.125em .5em 1em; }
#header_nav a:hover, #header_lang a:hover, #footer .title nav a:hover, #header_nav a.active, #header_lang a.active, #footer .title nav a.active { color: #3B8585; }

#header_lang { font-size: 17px; font-weight: 400; margin-left: 1.5rem; color: #B2B2B2; }
#header_lang li:first-child { position: relative; }
#header_lang li:first-child a:after { content: ''; display: block; width: 1px; height: 1.5em; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; background: #B2B2B2; opacity: .75; }
#header_lang li:last-child { margin-right: -1.25em; }
#header_lang a { letter-spacing: .2em; padding: 1em 1.25em .875em; }
#header_lang a:hover { opacity: .8; }
#header_lang a.active { pointer-events: none; }

#hamburger { display: none; }

/* -------------FOOTER------------ */
#footer { padding: 3.5rem 0 0; }
#footer .title { padding-bottom: .5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin-bottom: 2rem; }
#footer .title nav a { font-weight: 300; }
#footer .title nav a:last-child { padding-right: 0; }
#footer .title nav a:hover { opacity: .8; color: white; }
#footer .social { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; padding-bottom: 1rem; }
#footer .social li { margin-right: 0; margin-left: .875rem; }
#footer .social a { background: white; padding: .3rem; border-radius: 50%; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#footer .social a:hover { -moz-transform: translate(0, -3px); -o-transform: translate(0, -3px); -ms-transform: translate(0, -3px); -webkit-transform: translate(0, -3px); transform: translate(0, -3px); }
#footer .social a:active { -moz-transform: translate(0, -1px); -o-transform: translate(0, -1px); -ms-transform: translate(0, -1px); -webkit-transform: translate(0, -1px); transform: translate(0, -1px); }
#footer .social img { width: 1.875rem; }
#footer .contact { width: calc(100% - 13rem); margin-bottom: 2rem; }
#footer .contact li { padding: .35rem 0; }
#footer .contact a { max-width: calc(100% - 2.5rem); opacity: .75; font-weight: 300; line-height: 1.75; }
#footer .contact a:hover { opacity: 1; }
#footer .contact img { opacity: .75; width: 1.5rem; margin-right: .5rem; margin-top: .1rem; }
#footer .copyright { background: rgba(0, 0, 0, 0.25); padding: 1.25rem 0; font-size: 15px; }
#footer .copyright p { font-weight: 300; letter-spacing: .1em; }
#footer .copyright a { font-weight: 300; letter-spacing: .1em; padding: 0 1rem; margin: 0 1rem; position: relative; }
#footer .copyright a:before { content: ''; display: block; width: 1px; height: 90%; background: rgba(255, 255, 255, 0.75); position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; }
#footer .copyright a:hover { text-decoration: underline; }

#footer_logo { max-width: 250px; margin-left: -.25rem; margin-bottom: .25rem; }

/* -------------RWD--------------- */
@media screen and (max-width: 1366px) { body { margin-top: 62px; }
  #header { padding: .5rem 0; }
  #header.fixed { padding: .25rem 0; } }
@media screen and (max-width: 1280px) { body { margin-top: 54px; }
  #header_nav, #header_lang, #footer .title nav { font-size: 18px; }
  #header_lang { font-size: 16px; margin-left: .5rem; } }
@media screen and (max-width: 1200px) { body { margin-top: 42px; }
  #hamburger span, #hamburger:before, #hamburger:after { content: ''; display: block; width: 2em; height: 2px; background: #7CB892; position: absolute; top: .875em; left: 0; -moz-transition: all 0.4s ease, opacity 0.3s 0.1s ease; -o-transition: all 0.4s ease, opacity 0.3s 0.1s ease; -webkit-transition: all 0.4s ease, opacity 0.3s 0.1s ease; transition: all 0.4s ease, opacity 0.3s 0.1s ease; }
  #hamburger { display: block; width: 2rem; height: 2rem; margin: auto .875rem; opacity: .7; position: relative; cursor: pointer; }
  #hamburger span { width: 1.5em; margin-left: .5em; }
  #hamburger:before { -moz-transform: translate(0, -0.5rem); -o-transform: translate(0, -0.5rem); -ms-transform: translate(0, -0.5rem); -webkit-transform: translate(0, -0.5rem); transform: translate(0, -0.5rem); }
  #hamburger:after { -moz-transform: translate(0, 0.5rem); -o-transform: translate(0, 0.5rem); -ms-transform: translate(0, 0.5rem); -webkit-transform: translate(0, 0.5rem); transform: translate(0, 0.5rem); }
  #hamburger.active:before { opacity: 1; -moz-transform: translate(0, 0) rotate(-45deg); -o-transform: translate(0, 0) rotate(-45deg); -ms-transform: translate(0, 0) rotate(-45deg); -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); }
  #hamburger.active:after { opacity: 1; -moz-transform: translate(0, 0) rotate(45deg); -o-transform: translate(0, 0) rotate(45deg); -ms-transform: translate(0, 0) rotate(45deg); -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); }
  #hamburger.active span { opacity: 0; -moz-transform: translate(0.5em, 0); -o-transform: translate(0.5em, 0); -ms-transform: translate(0.5em, 0); -webkit-transform: translate(0.5em, 0); transform: translate(0.5em, 0); }
  #header { position: fixed; padding: .5rem 0; }
  #header.fixed { padding: .5rem 0; }
  #header_menu { display: none; padding: 1.5rem 0 2rem; color: #fafafa; max-height: 100vh; overflow: scroll; z-index: -1; }
  #header_menu.active { display: flex; width: 100%; background: #3B8585; background-image: #7CB892; background-image: -webkit-linear-gradient(legacy-direction(0deg), #7CB892, #3B8585); background-image: linear-gradient(0deg, #7CB892, #3B8585); border-top: 3.125rem solid white; border-bottom: 1px solid #7CB892; position: fixed; top: 0; left: 0; -webkit-animation-delay: 0; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInDown; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 0.4s; -moz-animation-name: fadeInDown; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 0.4s; -o-animation-name: fadeInDown; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 0.4s; animation-name: fadeInDown; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
  #header_menu.active #header_nav, #header_menu.active #header_lang, #header_menu.active #footer .title nav, #footer .title #header_menu.active nav { display: block; width: 90%; margin: 0 auto; }
  #header_menu.active #header_nav a, #header_menu.active #header_lang a, #header_menu.active #footer .title nav a, #footer .title #header_menu.active nav a { color: #ecffff; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
  #header_menu.active #header_nav a.active, #header_menu.active #header_lang a.active, #header_menu.active #footer .title nav a.active, #footer .title #header_menu.active nav a.active { color: white; font-weight: bold; }
  #header_menu.active #header_lang { display: flex; justify-content: flex-start; width: 90%; margin: 0 auto; padding: 1rem 0 0; }
  #header_menu.active #header_lang a { padding: 1em 1em 1em 1.25em; border-bottom: none; color: #ecffff; }
  #header_menu.active #header_lang a:after { background: white; }
  #header_menu.active #header_lang a.active { color: white; font-weight: bold; }
  #header_logo { max-width: 160px; }
  #footer_logo { max-width: 170px; margin-left: 0; } }
@media screen and (max-width: 768px) { #footer { padding-top: 2rem; }
  #footer .title nav { justify-content: flex-start; }
  #footer .title nav a { padding: .5em 1.5em .5em 0; }
  #footer .contact { width: 100%; }
  #footer .social { width: 100%; justify-content: flex-end; margin-top: -5rem; }
  #footer .social li:first-child { margin-left: 0; }
  #footer .copyright { font-size: 14px; }
  #footer_logo { max-width: 230px; } }
@media screen and (max-width: 480px) { #footer .title nav a { width: 50%; font-size: 14px; padding-right: 1rem; }
  #footer .copyright { font-size: 12px; }
  #footer .copyright a { margin-top: .5rem; }
  #footer .copyright a:after { content: ''; display: block; width: 1px; height: 90%; background: rgba(255, 255, 255, 0.75); position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; } }
html[lang="en"] { /* MAIN */ /* INDEX */ /* NEWS */ /* INSTALLER */ }
html[lang="en"] h2 { letter-spacing: .08em; margin-bottom: 2rem; }
html[lang="en"] h2 + p.text-large { display: none; }
html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6, html[lang="en"] b { letter-spacing: .024em; }
html[lang="en"] p, html[lang="en"] li { letter-spacing: .018em; }
html[lang="en"] #footer .contact li a { letter-spacing: .06em; }
html[lang="en"] #footer .unit ul { width: calc(100% - 9rem); }
html[lang="en"] .editor-content h2, html[lang="en"] .editor-content h3, html[lang="en"] .editor-content h4, html[lang="en"] .editor-content h5 { letter-spacing: .018em; }
html[lang="en"] .title-deco:before { bottom: 2rem; }
html[lang="en"] #kv p, html[lang="en"] #kv .text-large { letter-spacing: .024em; }
html[lang="en"] #product .content li { font-size: .875em; font-weight: 300; letter-spacing: .08em; }
html[lang="en"] #product .content .btn { font-size: .875em; }
html[lang="en"] #news_slider .content .line-3 { height: 4.5rem; line-height: 1.5; letter-spacing: .018em; font-weight: 300; }
html[lang="en"] #install .btn { letter-spacing: .024em; text-transform: capitalize; }
html[lang="en"] #install .row li p { line-height: 1.25; word-break: break-word; }
html[lang="en"] #installer_slider .card p { letter-spacing: .06em; line-height: 1.5; }
html[lang="en"] #news_info p b { font-weight: normal; letter-spacing: .018em; }
html[lang="en"] #news_info h2 { letter-spacing: .06em; text-transform: capitalize; }
html[lang="en"] #installer_title h2 { margin-bottom: 3rem; }
html[lang="en"] #installer_main h4 { font-weight: normal; }
html[lang="en"] #installer_main a { letter-spacing: .018em; font-weight: 400; }
html[lang="en"] #installer_main p { font-weight: 300; }

/* -------------RWD--------------- */
/* -------------TEXT-------------- */
html { font-size: 16px; }

body { position: relative; font-weight: 400; font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; color: #333333; }

option { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; }

h1, h2, h3, h4, h5, h6, a, p, b, small { font: inherit; color: inherit; }

h1 { font-size: 2rem; letter-spacing: 0; line-height: 1; }

h2 { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; font-size: 3rem; font-weight: 600; letter-spacing: .026em; line-height: 1.45; margin: 1rem 0; }
h2 + p { font-size: 1.65rem; font-weight: 300; letter-spacing: .05em; }
h2 + p.text-small { font-size: 1.25rem; }

h3 { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; font-size: 2.75rem; font-weight: 600; letter-spacing: .08em; line-height: 1.25; font-style: normal; margin-bottom: .5em; text-align: center; }

h4 { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; font-size: 2rem; font-weight: 500; letter-spacing: .04em; line-height: 1.25; margin-bottom: 1rem; }

h5 { font-size: 1.125rem; font-weight: 400; letter-spacing: .16em; line-height: 1.5; margin-bottom: .5em; }

h6 { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.04em; }

a { display: inline-block; text-decoration: none; letter-spacing: .05em; }

p { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; line-height: 1.75; letter-spacing: .04em; }
p.text-large { font-size: 1.125rem; }

b, strong { letter-spacing: .15em; font-weight: bold; }

small { font-size: 14px; line-height: 1.5; }

code { font-family: "Consolas", monospace; }

.color-black { color: #333333; }

.color-dark { color: #666666; }

.color-dark-grey { color: #808080; }

.color-grey { color: #979797; }

.color-white { color: #fafafa; }

.color-primary { color: #3B8585; }

.color-secondary { color: #EF8B1E; }

.color-primary-light { color: #7CB892; }

.align-left { text-align: left; }

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

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

.bold { font-weight: bold; }

.italic { font-style: italic; }

.uppercase { text-transform: uppercase; }

.font-content { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; }

.font-title { font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; }

.text-large { font-size: 1.25em; }

.text-small { font-size: 1em; }

/* -------------RWD--------------- */
@media screen and (max-width: 1024px) { h2 { font-size: 2.5rem; }
  h2 + p { font-size: 1.5rem; }
  h3 { font-size: 2.5rem; } }
@media screen and (max-width: 1280px) { html { font-size: 14px; } }
@media screen and (max-width: 768px) { html { font-size: 13px; }
  p { font-size: 14px; line-height: 1.5; } }
@media screen and (max-width: 480px) { html { font-size: 12px; }
  h2 { font-size: 2rem; }
  h2 + p { font-size: 1.25rem; }
  h3 { font-size: 2.5rem; } }
/* ---------ANIMATION-------- */
@-webkit-keyframes colorrun { 50% { filter: hue-rotate(-25deg); } }
@-moz-keyframes colorrun { 50% { filter: hue-rotate(-25deg); } }
@-ms-keyframes colorrun { 50% { filter: hue-rotate(-25deg); } }
@-o-keyframes colorrun { 50% { filter: hue-rotate(-25deg); } }
@keyframes colorrun { 50% { filter: hue-rotate(-25deg); } }
@-webkit-keyframes floating { 50% { -moz-transform: translate(5px, 0); -o-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } }
@-moz-keyframes floating { 50% { -moz-transform: translate(5px, 0); -o-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } }
@-ms-keyframes floating { 50% { -moz-transform: translate(5px, 0); -o-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } }
@-o-keyframes floating { 50% { -moz-transform: translate(5px, 0); -o-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } }
@keyframes floating { 50% { -moz-transform: translate(5px, 0); -o-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } }
@-webkit-keyframes banner_floating { 0% { opacity: 0; -moz-transform: translate(0, 100%) scale(2); -o-transform: translate(0, 100%) scale(2); -ms-transform: translate(0, 100%) scale(2); -webkit-transform: translate(0, 100%) scale(2); transform: translate(0, 100%) scale(2); }
  50% { opacity: 1; -moz-transform: translate(0, 0) scale(1); -o-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
  90% { opacity: 0; }
  100% { -moz-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -o-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -ms-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -webkit-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); } }
@-moz-keyframes banner_floating { 0% { opacity: 0; -moz-transform: translate(0, 100%) scale(2); -o-transform: translate(0, 100%) scale(2); -ms-transform: translate(0, 100%) scale(2); -webkit-transform: translate(0, 100%) scale(2); transform: translate(0, 100%) scale(2); }
  50% { opacity: 1; -moz-transform: translate(0, 0) scale(1); -o-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
  90% { opacity: 0; }
  100% { -moz-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -o-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -ms-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -webkit-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); } }
@-ms-keyframes banner_floating { 0% { opacity: 0; -moz-transform: translate(0, 100%) scale(2); -o-transform: translate(0, 100%) scale(2); -ms-transform: translate(0, 100%) scale(2); -webkit-transform: translate(0, 100%) scale(2); transform: translate(0, 100%) scale(2); }
  50% { opacity: 1; -moz-transform: translate(0, 0) scale(1); -o-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
  90% { opacity: 0; }
  100% { -moz-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -o-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -ms-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -webkit-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); } }
@-o-keyframes banner_floating { 0% { opacity: 0; -moz-transform: translate(0, 100%) scale(2); -o-transform: translate(0, 100%) scale(2); -ms-transform: translate(0, 100%) scale(2); -webkit-transform: translate(0, 100%) scale(2); transform: translate(0, 100%) scale(2); }
  50% { opacity: 1; -moz-transform: translate(0, 0) scale(1); -o-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
  90% { opacity: 0; }
  100% { -moz-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -o-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -ms-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -webkit-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); } }
@keyframes banner_floating { 0% { opacity: 0; -moz-transform: translate(0, 100%) scale(2); -o-transform: translate(0, 100%) scale(2); -ms-transform: translate(0, 100%) scale(2); -webkit-transform: translate(0, 100%) scale(2); transform: translate(0, 100%) scale(2); }
  50% { opacity: 1; -moz-transform: translate(0, 0) scale(1); -o-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
  90% { opacity: 0; }
  100% { -moz-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -o-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -ms-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); -webkit-transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); transform: translate(-50%, -150%) scale(2, 1) rotate(-45deg); } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.fadeIn { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-webkit-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
.fadeOut { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeOut; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate(0, 30px); -o-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate(0, 30px); -o-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-ms-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate(0, 30px); -o-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate(0, 30px); -o-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate(0, 30px); -o-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
.fadeInUp { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-webkit-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate(0, -30px); -o-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); transform: translate(0, -30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate(0, -30px); -o-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); transform: translate(0, -30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-ms-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate(0, -30px); -o-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); transform: translate(0, -30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate(0, -30px); -o-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); transform: translate(0, -30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate(0, -30px); -o-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); transform: translate(0, -30px); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-webkit-keyframes showContent { 0% { opacity: 0; -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
  100% { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-moz-keyframes showContent { 0% { opacity: 0; -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
  100% { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-ms-keyframes showContent { 0% { opacity: 0; -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
  100% { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-o-keyframes showContent { 0% { opacity: 0; -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
  100% { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes showContent { 0% { opacity: 0; -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
  100% { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
.banner { width: 100%; height: 0; padding-bottom: 30.5208%; background: center top / cover no-repeat; position: relative; overflow: hidden; }
.banner:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 41.6666%; background: url(/assets/img/banner/bg-line.png) left top; background-size: 100% auto; position: absolute; top: 0; left: 0; }
.banner .container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 15em; z-index: 2; }
.banner h2 + p { font-weight: 400; width: 87%; }
.banner h2 + p a { display: inline-block; position: relative; }
.banner h2 + p a:before { content: ''; display: block; width: 100%; height: 1px; background: white; position: absolute; bottom: .125em; left: 0; right: 0; margin: 0 auto; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.banner h2 + p a:hover:before { -moz-transform: scale(0.9, 1); -o-transform: scale(0.9, 1); -ms-transform: scale(0.9, 1); -webkit-transform: scale(0.9, 1); transform: scale(0.9, 1); }
.banner h2 + p a:active:before { -moz-transform: scale(0.5, 1); -o-transform: scale(0.5, 1); -ms-transform: scale(0.5, 1); -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); }
.banner + .note { background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-top: -8em; position: relative; z-index: 2; padding: 1.5em 2em; }
.banner.banner-s { height: auto; padding: 1rem 0 5rem; }
.banner.banner-s:before { top: -110%; }
.banner.banner-s .container { position: relative; top: 0; left: 0; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.banner.banner-l .container { height: 17em; }

@media screen and (max-width: 1440px) { .banner h2 + p { width: 90%; }
  .banner.banner-l .container { height: 17em; } }
@media screen and (max-width: 1024px) { .banner h2 + p { font-size: 1.25rem; }
  .banner.banner-l { padding-bottom: 45%; }
  .banner.banner-l .container { height: 20em; } }
@media screen and (max-width: 768px) { .banner { padding-bottom: 50%; }
  .banner:before { width: 150%; padding-bottom: 60%; left: -20%; }
  .banner h2 + p { width: 100%; }
  .banner + .note h4 { font-size: 1.5em; }
  .banner.banner-s:before { top: -90%; }
  .banner.banner-l { padding-bottom: 75%; }
  .banner.banner-l .container { height: 20em; } }
@media screen and (max-width: 480px) { .banner { padding-bottom: 80%; }
  .banner .container { height: 18em; }
  .banner:before { width: 250%; padding-bottom: 100%; top: auto; bottom: -20%; left: -30%; }
  .banner.banner-s:before { top: -120%; left: 0; }
  .banner.banner-l { padding-bottom: 120%; }
  .banner.banner-l .container { height: 25em; } }
.bg-black { background-color: #333333; }

.bg-grey { background-color: #979797; }

.bg-light-grey { background-color: #f7f7f7; }

.bg-light { background-color: #E5E5E5; }

.bg-white { background-color: #fafafa; }

.bg-primary { background-color: #47817F; }

.bg-primary-light { background-color: #7CB892; }

.breadCrumb { display: flex; align-items: flex-start; justify-content: flex-start; font-weight: 400; font-size: 1.125em; color: #979797; margin: 1rem auto 1.75rem; }
.breadCrumb span { padding: 0 .5rem; }

.color-white .breadCrumb { color: #fafafa; font-weight: 300; }

@media screen and (max-width: 620px) { .breadCrumb { margin: .75rem auto; } }
@media screen and (max-width: 480px) { .breadCrumb { font-size: 14px; } }
/* ---------BTN-------------- */
.btn { display: inline-block; min-width: 200px; background: rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 30px; padding: .75rem 2rem; margin: 1rem 0; font-size: 1.125rem; font-weight: 300; letter-spacing: .1rem; line-height: 1; text-transform: uppercase; position: relative; cursor: pointer; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
.btn svg { display: inline-block; vertical-align: middle; width: 1.45em; margin-top: -.5em; margin-left: .5em; fill: #808080; }
.btn:hover { background: #808080; color: #fafafa; -moz-transform: translate(0, -3px); -o-transform: translate(0, -3px); -ms-transform: translate(0, -3px); -webkit-transform: translate(0, -3px); transform: translate(0, -3px); }
.btn:hover svg { -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -webkit-animation-name: floating; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 1s; -moz-animation-name: floating; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 1s; -o-animation-name: floating; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1s; animation-name: floating; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.btn:active { -moz-transform: translate(0, -1px); -o-transform: translate(0, -1px); -ms-transform: translate(0, -1px); -webkit-transform: translate(0, -1px); transform: translate(0, -1px); }
.btn.btn-primary { color: #fafafa; border-color: #3B8585; background: #3B8585; }
.btn.btn-primary svg { fill: #fafafa; }
.btn.btn-primary:hover { background: #7CB892; }
.btn.btn-primary-light { color: #fafafa; border-color: #7CB892; background: #7CB892; }
.btn.btn-primary-light svg { fill: #fafafa; }
.btn.btn-primary-light:hover { background: #3B8585; }
.btn.btn-white { color: #3B8585; border-color: #fafafa; background: #fafafa; font-weight: 400; }
.btn.btn-white svg { fill: #fafafa; }
.btn.btn-white:hover { border-color: #3B8585; }
.btn.btn-bk { text-transform: none; }
.btn.btn-bk svg { width: 1.75em; margin-left: 0; margin-right: .75em; margin-bottom: -.45em; -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }
.btn.btn-bk:hover svg { -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -webkit-animation-name: floating_bk; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 1s; -moz-animation-name: floating_bk; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 1s; -o-animation-name: floating_bk; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1s; animation-name: floating_bk; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }

.btn-more { padding-right: 1.5em; background-size: 1em; color: #3B8585; font-weight: 500; letter-spacing: .024em; position: relative; cursor: pointer; }
.btn-more:after { content: ''; display: block; width: 1em; height: 1em; background: url(/assets/img/icon/arrow-r.svg) right center no-repeat; position: absolute; top: 0; right: 0; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.btn-more:hover { color: #7CB892; }
.btn-more.active:after { -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }

@media screen and (max-width: 1023px) { .btn { min-width: 180px; } }
@media screen and (max-width: 768px) { .btn { min-width: 160px; } }
.editor-content { word-break: break-all; word-break: break-word; /* 標記背景色 */ /* 單行引用文字 */ /* 引用來源 */ /* keyboard input */ }
.editor-content h2, .editor-content h3, .editor-content h4, .editor-content h5 { margin: 1rem 0; line-height: 1.75; }
.editor-content p { margin-bottom: 1.5rem; }
.editor-content p, .editor-content li { font-size: 18px; line-height: 1.75; letter-spacing: .018em; }
.editor-content a { display: inline; font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.5; letter-spacing: .018em; color: #3B8585; }
.editor-content a:hover { text-decoration: underline; }
.editor-content .marker { background: #3B8585; }
.editor-content big { font-size: 1.25em; }
.editor-content small { font-size: .85em; }
.editor-content b, .editor-content strong { font-weight: bold; }
.editor-content q { font-family: Georgia,Cambria,"Times New Roman",Times,serif; }
.editor-content cite { font-style: italic; }
.editor-content kbd { font-family: "Consolas", monospace; }
.editor-content samp { /* output範例 */ display: block; border: 1px solid #eeeeee; padding: 10px; }
.editor-content blockquote { /* 引用段落文字 */ display: block; font-family: Georgia,Cambria,"Times New Roman",Times,serif; font-weight: 400; font-style: italic; line-height: 1.48; letter-spacing: -.012rem; margin: 1rem 0; padding: 0 1rem; }
.editor-content img, .editor-content iframe { height: auto; max-width: 100%; max-height: none; margin: 1rem 0; }
.editor-content ul { margin: .5rem 0; list-style-position: inside; }
.editor-content ul li { list-style-type: disc; }
.editor-content ul li li { list-style-type: circle; margin-left: 2rem; }
.editor-content ul li li li { list-style-type: block; margin-left: 2rem; }
.editor-content ol { margin: 10px 0; list-style-position: inside; }
.editor-content ol li { list-style-type: upper-alpha; }
.editor-content ol li li { list-style-type: lower-alpha; margin-left: 2rem; }
.editor-content ol li li li { list-style-type: decimal-leading-zero; margin-left: 2rem; }
.editor-content ol li li li li { list-style-type: lower-latin; margin-left: 2rem; }
.editor-content table { width: auto; max-width: 100%; border-collapse: collapse; margin: 1em 0; }
.editor-content td { border: 1px solid #3B8585; padding: .5em; }
.editor-content td p { margin-bottom: 0; }

@media screen and (max-width: 1280px) { .editor-content p, .editor-content li { font-size: 16px; } }
.tab-filter { color: white; background: #7CB892; }
.tab-filter .w1200 { width: 100%; }
.tab-filter ul { position: relative; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; }
.tab-filter ul::-webkit-scrollbar { display: none; }
.tab-filter li { flex-shrink: 0; min-width: 7em; font-size: 1.35rem; font-weight: 300; letter-spacing: .05em; padding: 1.25rem 2rem; text-align: center; cursor: pointer; }
.tab-filter li.active { background: #3B8585; }

@media screen and (max-width: 480px) { .tab-filter li { min-width: 6em; padding: 1.25rem 1rem; } }
/* ---------FORM-------------------- */
label { font-weight: 400; font-family: "Roboto", "Microsoft JhengHei", "Arial", sans-serif; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=date], select, textarea { width: 100%; font-size: 1rem; font-weight: 400; letter-spacing: .1em; line-height: 1.5; padding: 10px 15px; margin: 5px 0; border: 1px solid #7CB892; color: #666666; -webkit-border-radius: 0px; border-radius: 1.5rem; box-sizing: border-box; opacity: .5; }

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=date]:focus, select:focus, textarea:focus { opacity: 1; }

textarea { padding-top: 20px; padding-bottom: 20px; min-width: 100%; max-width: 100%; }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; }

/* ----------placeholder------------ */
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-ms-input-placeholder { font-weight: 400; color: #aaaaaa; opacity: 1; }

/* ----------INPUT[select]---------- */
.select { position: relative; }
.select:after { content: ''; display: block; width: 1rem; height: 1rem; background: center center / contain no-repeat; background-image: url(/assets/img/icon/arrow-r.svg); position: absolute; top: 1.25rem; right: 1.5rem; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

/* ----------INPUT[search]---------- */
.search { position: relative; }

input[type=search] { -webkit-appearance: textfield; }

::-webkit-search-decoration, ::-webkit-search-cancel-button { display: none; }

/* ----------INPUT[radio+checkbox]-- */
input[type=radio]:not(old), input[type=checkbox]:not(old) { width: 0; margin: 0; font-size: 0; opacity: 0; pointer-events: none; display: none; }

input[type=radio]:not(old) + label, input[type=checkbox]:not(old) + label { position: relative; display: block; line-height: 24px; margin-right: 17px; cursor: pointer; letter-spacing: 0; }

input[type=radio]:not(old) + label, input[type=checkbox]:not(old) + label { display: inline-block; padding: 0 5px 0 22px; }

input[type=radio]:not(old) + label:before { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 100%; border: 2px solid #979797; left: 0; top: .125em; }

input[type=radio]:not(old):checked + label:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: #3B8585; border-radius: 100%; left: 4px; top: .375em; }

input[type=checkbox]:not(old) + label:before { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid #979797; left: 0; top: .125em; }

input[type=checkbox]:not(old):checked + label:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: #3B8585; left: 4px; top: .375em; }

/* ---------ICON-SIZE-------------- */
.icon-xs { width: 24px; display: inline-block; vertical-align: middle; }

.icon-s { width: 30px; display: inline-block; vertical-align: middle; }

.icon-m { width: 36px; display: inline-block; vertical-align: middle; }

.icon-l { width: 42px; display: inline-block; vertical-align: middle; }

/* ---------ICON-STYLE-------------- */
/*----rwd--------------*/
@media screen and (max-width: 768px) { .icon-xs { width: 22px; }
  .icon-s { width: 28px; }
  .icon-m { width: 34px; }
  .icon-l { width: 40px; } }
.list-disc > li { font-size: 1rem; line-height: 1.25; letter-spacing: .018em; padding-left: 1.25rem; margin-bottom: .5rem; position: relative; color: #666666; }
.list-disc > li:before { content: ''; display: block; width: .5rem; height: .5rem; border-radius: .25rem; background: #979797; position: absolute; top: .35em; left: 0; }
.list-disc.list-primary > li:before { background: #3B8585; }
.list-disc.list-primary-light > li:before { background: #7CB892; }
.list-disc.list-light > li:before { background: #afafaf; }

.list-decimal { counter-reset: mycounter; }
.list-decimal li { font-size: 1rem; line-height: 1.5; letter-spacing: .018em; padding-left: 2.5em; margin-left: 1.5rem; margin-bottom: .75rem; position: relative; }
.list-decimal li:before { counter-increment: mycounter; content: counter(mycounter); display: block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 15px; color: white; background: #3B8585; position: absolute; top: 0; left: 0; z-index: 2; }

.list-bar > li { font-size: 1em; line-height: 1.25; letter-spacing: .018em; padding-left: 2rem; margin-bottom: .5rem; position: relative; }
.list-bar > li:before { content: ''; display: block; width: 1.25rem; height: .125rem; border-radius: .25rem; background: #666666; position: absolute; top: .5em; left: 0; }

.list-news .item { padding: 0 .75rem; }
.list-news a { display: block; }
.list-news a:hover h6 { color: #3B8585; }
.list-news figure { width: 100%; height: 0; padding-bottom: 66.6666%; background: center center / cover no-repeat; }
.list-news .content { padding: 1rem 2px 1.25rem; }
.list-news .content .flex-nowrap { align-items: center; justify-content: flex-start; margin-bottom: .5rem; }
.list-news .content .tag { font-weight: 500; letter-spacing: .06em; padding-right: .875rem; margin-right: 1rem; position: relative; }
.list-news .content .tag:after { content: ''; display: block; width: 1px; height: 60%; background: #3B8585; position: absolute; left: 100%; top: 0; bottom: 0; margin: auto 0; }
.list-news .content time { letter-spacing: .1em; }
.list-news .content h6 { line-height: 1.25; height: 4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; margin-bottom: .25rem; }
.list-news .content .line-3 { line-height: 1.75; height: 5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.list-cate .item, .list-product .item { padding: 2rem 1rem; }
.list-cate .card, .list-product .card { display: block; padding: 2.5rem 3.5rem; background: white; border: 1px solid #7CB892; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
.list-cate .card:hover, .list-product .card:hover { border-color: #3B8585; }
.list-cate .card:hover figure, .list-product .card:hover figure { -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); -webkit-transform: translate(0, -10px); transform: translate(0, -10px); }
.list-cate .card:hover h6, .list-product .card:hover h6 { color: #3B8585; }
.list-cate figure, .list-product figure { width: 90%; height: 0; padding-bottom: 65%; margin: 0 auto; position: relative; -moz-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in; }
.list-cate figure img, .list-product figure img { width: auto; max-width: 100%; height: auto; max-height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; }
.list-cate h6, .list-product h6 { border-top: 1px solid #E5E5E5; padding: 1rem 0 .5rem; -moz-transition: color 0.25s ease-in; -o-transition: color 0.25s ease-in; -webkit-transition: color 0.25s ease-in; transition: color 0.25s ease-in; }

.list-product .item { padding: 0 .875rem; margin-bottom: 3rem; }
.list-product .card { padding: 1.5rem 1.25rem; }
.list-product figure { width: 100%; padding-bottom: 80%; }
.list-product h6, .list-product ul { padding-left: .125rem; }
.list-product h6 { font-size: 1.45rem; letter-spacing: .018em; padding-top: .875rem; padding-bottom: .75rem; }

/*----rwd--------------*/
@media screen and (max-width: 1280px) { .list-cate .item, .list-product .item { padding: 2rem .75rem; }
  .list-cate .card, .list-product .card { padding: 1.5rem 2.5rem; }
  .list-product .item { padding: 0 .875rem; }
  .list-product .card { padding: 1.5rem 1.25rem; } }
@media screen and (max-width: 1024px) { .list-product .item { width: 33.3333%; } }
@media screen and (max-width: 768px) { .list-cate .item, .list-product .item { padding: 1rem .5rem; }
  .list-cate .card, .list-product .card { padding: 1rem 1.5rem; }
  .list-product .item { margin-bottom: 0; } }
@media screen and (max-width: 620px) { .list-news .content .line-3 { font-size: 14px; height: 5.875rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .list-product .item { width: 50%; } }
@media screen and (max-width: 400px) { .list-product .item { width: 100%; } }
/* ----------PAGINATION---------- */
ul.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; text-align: center; padding-top: 30px; }
ul.pagination li { padding: 0 .45rem; }
ul.pagination li a { font-size: 1.2em; color: #3B8585; padding: .75rem .6rem; border-radius: 2rem; }
ul.pagination li a:hover { background-color: #ecf2f2; }
ul.pagination li a.active { background-color: #3B8585; color: white; }
ul.pagination li:first-child { margin-left: auto; }
ul.pagination li:last-child { margin-right: auto; }
ul.pagination .prev, ul.pagination .next { padding: 0 .75rem; }
ul.pagination .prev a, ul.pagination .next a { padding: .5rem .35rem; border: 1px solid #7CB892; }
ul.pagination .prev a:hover, ul.pagination .next a:hover { border-color: #3B8585; background: none; }
ul.pagination .prev svg, ul.pagination .next svg { width: 1.5rem; height: .75rem; }
ul.pagination .prev svg { -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }

@media screen and (max-width: 620px) { ul.pagination li { padding: 0 .125rem; } }
/* ----------PARTICLE---------- */
[id^="particles-"] { position: absolute; }
[id^="particles-"]:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; }
[id^="particles-"].left-bottom { left: 0; bottom: 0; }
[id^="particles-"].right-bottom { right: 0; bottom: 0; }
[id^="particles-"].right-top { right: 0; top: 0; }

.owl-nav { width: 100%; height: 38px; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; }
.owl-nav .owl-prev, .owl-nav .owl-next { width: 38px; height: 38px; background: #3B8585; border-radius: 20px; position: absolute; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
.owl-nav .owl-prev svg, .owl-nav .owl-next svg { width: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 8%; margin: auto; }
.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover { background: #7CB892; margin-top: -2px; }
.owl-nav .owl-prev:active, .owl-nav .owl-next:active { background: #7CB892; margin-top: -1px; }
.owl-nav .owl-prev { left: -5%; -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }
.owl-nav .owl-next { right: -5%; }

#particles-news { width: 40%; }
#particles-news:after { box-shadow: -20px 20px 20px white inset; }

#slider-news { margin-top: 2.5rem; }
#slider-news .owl-nav { bottom: auto; top: 30%; }

/*----rwd--------------*/
@media screen and (max-width: 1280px) { .owl-nav .owl-prev { left: -1%; }
  .owl-nav .owl-next { right: -1%; } }
@media screen and (max-width: 620px) { #particles-news { width: 100%; }
  #slider-news .content .line-3 { font-size: 14px; height: 5.875rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } }

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