@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:300,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,600,600i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cardo:400,400i&display=swap');
/*
font-family: 'Noto Serif TC', serif, 'FontAwesome';
300,500,700

font-family: 'Lora', serif;
400,400i,600,600i

font-family: 'Cardo', serif;
400,400i


*/

html, body { height: 100%; /*scroll-behavior: smooth;*/ }

body { font-family: 'Cardo', 'Noto Serif TC', serif; font-size: 16px; line-height:1.7; color:#4D4D4D;  letter-spacing:1px; height: 100%; text-align: justify; font-weight: 300;  }

input , select , textarea , button { font-family: 'Cardo', 'Noto Serif TC', serif; letter-spacing:1px; color:#4D4D4D; font-weight: 300; -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
  background: none; border: none; 
}

input:focus { outline: none; }

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

h1, h2, h3, h4, h5, h6 { text-align: left; font-family: 'Cardo', 'Noto Serif TC', serif; letter-spacing: 1px; font-weight: 300; }

a { text-decoration:none; color:#4D4D4D; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
a:hover { opacity: .5; }

.clearfix { display: block; clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.left { float: left; }
.right { float: right; }

#backtop {
  position: fixed;
  right: 105px;
  bottom: 8px;
  outline: none;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s linear;
  z-index: 199;
  opacity: 1;
  display: none;
  color: #4D4D4D;
  font-size: 11px;
}
#backtop i { display: block; }
#backtop:hover { color: #988057; }
#backtop.mcOut { opacity: 0; }

.go-esd a { position: fixed; z-index: 199; right: 0; bottom: 30px; display: block; width: 90px; padding: 0 15px; }
.go-esd a img { width: 100%; display: block; }

.orignal { width: 100%; }
.large { width: 50%; }
.medium { width: 33.33%; }
.small { width: 25%; }
.micro { width: 20%; }

.bgcolor01 { background: #FBFBFB!important; }

/* header */
header .logo a { width: 90px; position: fixed; left: 45px; top: 30px; z-index: 199; }
header .logo img { width: 100%; display: block; }
header .logo a:hover { opacity: .85; }
header .share { font-size: 21px; width: 90px; text-align: center; position: fixed; left: 0; bottom: 30px; z-index: 199; }
header .nav { position: fixed; right: 0; top: 30px; z-index: 199; width: 90px; text-align: center; }
header .nav li { font-size: 14px; }
header .nav li a { width: 100%; display: block; height: 60px; line-height: 60px; background: url("../img/logo_white.svg") center center no-repeat; }
header .nav li a:hover { color: #988057; opacity: 1; background: url("../img/logo_gray.svg") center center no-repeat; }
header .nav li span { /*font-size: 15px;*/ font-style: normal; text-align: center; line-height: 1.2; display: block; width: 20px; margin: 0 auto; }
header .share img { margin: 0 auto 20px; }
header .bar-left { background: #fff; position: fixed; left: 0; top: 0; height: 100%; width: 90px; z-index: 99; border-right: #988057 1px solid; }
header .bar-right { background: #fff; position: fixed; right: 0; top: 0; height: 100%; width: 90px; z-index: 99; border-left: #988057 1px solid; }
header .bar-top { background: #fff; position: fixed; left: 0; top: 0; height: 50px; width: 100%; z-index: 99; display: none; }

nav { position: fixed; left: 0; top: 0; z-index: 9999; display: none; width: 100%; height: 50px; }

/* Content */
.content { padding: 0 90px; }
.wrapper { width: 100%; overflow: hidden; position: relative; }
.wrapper img { width: 100%; }
.background { position: relative; display: block; background-size: cover; background-repeat: no-repeat; background-position: center; }

.caption { width: 60%; font-size: 36px; font-family: Microsoft JhengHei, sans-serif; letter-spacing: 5px; font-weight: 300; padding-left: 3em; }

.caption.homepage { text-align: right; padding-left: 0; padding-right: 3em; position: absolute; color: #fff; right: 0; top: 50%; transform: translate(0, -50%); }
.caption.step { position: absolute; color: #fff; left: 0; top: 45%; transform: translate(0, -50%); }
.caption span { font-size: 21px; display: block; letter-spacing: 1px; }
.caption.step02 { color:#4D4D4D; }

.golink { display: inline-block; text-align: center; margin: 2em auto 0; padding: 10px 50px; font-style: italic; color: #988057; background: #fff; border: #988057 1px solid; }
.golink:hover {color: #fff; background: #988057; opacity: 1; }

.wecare { height: 700px; background-image: url('../img/img_bg_index_2.jpg'); }
.wecare .desc { padding: 50px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); }
.wecare .desc div { font-size: 18px; background: #fff; padding: 2.5em;  }
.wecare .img { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); }

.wecare .desc .headline { font-style: italic; color: #988057; margin-bottom: 1em; }
.wecare .desc .subhead { font-size: 26px; margin-bottom: 1em; }

.grid { text-align: center; background: #fff; position: relative; }
.grid .grid-caption-1 { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); }
.grid .grid-caption-2 { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); }
.grid .grid-img { background: #FBFBFB; }
.grid .grid-img img { margin: 0 auto; width: 100%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.grid .grid-img a:hover img { opacity: .75; }
.grid .grid-desc { padding: 0 100px; }
.grid .grid-desc-0 { padding: 0; }
.grid .headline { text-align: center; font-size: 24px; margin-bottom: 1em; }
.grid .headline.home { color: #988057; }
.grid .subhead { font-style: italic; color: #988057; margin-bottom: 1em; }
.grid-icon { font-size: 48px; font-style: italic; text-align: center; width: 60px; margin: 0 auto .5em; }
.grid-icon span { font-size: 13px; display: block; border-bottom: #4D4D4D 1px solid; padding-bottom: 1em; }

.parallax-window {
    min-height: 700px;
    background: transparent;
    position: relative;
}
.parallax-window div { text-shadow: 0 0 10px #000; font-weight: 300; font-size: 24px; text-align: center; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 50px; }
.parallax-window div span { letter-spacing: 50px; font-size: 36px; display: block; }
.parallax-window div img { max-width: 510px; display: block; margin: 0 auto 30px; width: 100%; }

.videocol { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; height: 600px; }
#myVideo {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.video-caption { width: 100%; text-align: center; z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #fff; }
.video-caption span { font-size: 48px; }

.highlight-txt , .highlight-txt h3.headline { text-align: left; }
.highlight-txt h3.headline span.underline--magical {
  background-image: linear-gradient(120deg, #e7cf91 0%, #c9aa57 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  font-weight: 300;
  transition: background-size 0.3s ease-in;
}
.highlight-txt h3.headline:hover span.underline--magical {
  background-size: 100% 88%;
}

.highlight-txt h5.headline { color:#4D4D4D; text-align: left; font-size: 21px; margin-bottom: 1em; }
.highlight-img-st1-1 { height: 400px; background-position: center bottom; background-size: 400px 400px; }
.highlight-img-st1-2 { height: 700px; }
.highlight-img-st2-1 { height: 400px; background-position: center center; background-size: 95%; }
.highlight-img-st3-3 { background-size: cover; height: 400px; background-position: left center; }
.highlight-img-st4-3 { height: 400px; background-position: left bottom; background-size: 85%; }
.highlight-img-st5-1 { height: 650px; background-position: right center; background-size: cover; }

.step-grid { height: 650px; text-align: center; position: relative; }
.step-grid .img { height: 650px; }
.step-grid .grid-caption-3 , .step-grid .grid-caption-5 , .step-grid .grid-caption-7 { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); }
.step-grid .grid-caption-4 , .step-grid .grid-caption-6 , .step-grid .grid-caption-8 { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); }
.step-grid .grid-img img { margin: 0 auto; width: 100%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.step-grid .grid-img a:hover img { opacity: .75; }
.step-grid .grid-desc { padding: 0 100px; }
.step-grid .headline { text-align: center; font-size: 21px; color: #988057; margin-bottom: 1em; }
.step-grid .subhead { font-style: italic; color: #988057; margin-bottom: 1em; }

.pro-grid { text-align: center; }
.pro-grid figure { padding: 5em; display: inline-block; margin-left: -5px; width: 50%; vertical-align: top; }
.pro-grid figure figcaption.img { overflow: hidden; background: #F2F2F2; margin-bottom: 2em; }
.pro-grid figure figcaption.img * { -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.pro-grid figure figcaption.img a:hover img { transform: scale(1.1); }
.pro-grid figure figcaption h3.headline { text-align: center; font-size: 21px; color: #988057; margin-bottom: 2em; }
.pro-grid figure figcaption ul { text-align: left; margin-left: 20px; list-style: decimal; margin-bottom: 2em; }
.pro-grid figure figcaption li { margin-bottom: .5em; }
.pro-grid figure figcaption li:last-child { margin-bottom: 0; }
.pro-grid figure figcaption .detail { text-align: left; color: #988057; }
.pro-grid figure figcaption .detail label { color: #898989; float: left; width: 100px; }
.pro-grid figure figcaption .detail p { clear: both; }

.icon-grid { text-align: center; background: #FBFBFB; padding: 10em 0; }
.icon-grid-wrapper { max-width: 1200px; margin: 0 auto; }
.icon-grid figure { padding: 1em; display: inline-block; margin-left: -5px; width: 25%; vertical-align: top; }
.icon-grid h3 { text-align: center; font-size: 24px; color: #988057; margin-bottom: 5em; }
.icon-grid h3.normal { margin-bottom: 1em; }
.icon-grid figure figcaption { background: #fff; padding: 3em; min-height: 400px; }
.icon-grid figure figcaption div { line-height: 1.2; }
.icon-grid figure figcaption div span { display: block; font-size: 200%; }
.icon-grid figure figcaption img { width: 100%; max-width: 150px; display: block; margin: 1em auto; }
.icon-grid .desc { padding: 0 3em; }
.icon-grid .desc img.img { width: 100%; max-width: 100%; margin: 3em auto 0; }

/* parallax */
.parallax-about { background: #f2f2f2; height: 6600px; }
.parallax-about > div { z-index: 5; width: 100%; display: block; position: fixed; top: 0; left: 0; }
.parallax-about > div > div { position: relative; }
.parallax-about img { max-width: inherit!important; }

#parallax-bg-1 div div { position: absolute; left: 70%; top: 150px; transform: translate(-50%, 0); width: 20px; font-size: 36px; line-height: 1.2; font-family: Microsoft JhengHei, sans-serif; font-weight: 300; }
#parallax-bg-1 div div span { font-weight: 700; display: block; margin-bottom: 20px; }

#parallax-bg-2 div div { position: absolute; left: 35%; top: 200px; transform: translate(-50%, 0); }

#parallax-bg-3 div div { position: absolute; left: 50%; top: 900px; transform: translate(-50%, 0); background: #fff; max-width: 1000px; width: 100%; padding: 3em; }
#parallax-bg-3 div div .subhead { text-align: center; font-style: italic; color: #988057; margin-bottom: 1em; }
#parallax-bg-3 div div .headline { text-align: center; font-size: 21px; margin-bottom: 1em; }


#parallax-bg-4 div div { position: absolute; left: 30%; top: 1200px; transform: translate(-50%, 0); width: 20px; font-size: 36px; line-height: 1.2; font-family: Microsoft JhengHei, sans-serif; font-weight: 300; }
#parallax-bg-4 div div span { font-weight: 700; display: block; margin-bottom: 20px; }


#parallax-bg-5 div div { position: absolute; left: 60%; top: 1250px; transform: translate(-50%, 0); }
#parallax-bg-5 div div img { width: 600px; }


#parallax-bg-6 div div { position: absolute; left: 50%; top: 1800px; transform: translate(-50%, 0); background: #fff; max-width: 1000px; width: 100%; padding: 3em; }
#parallax-bg-6 div div .subhead { text-align: center; font-style: italic; color: #988057; margin-bottom: 1em; }
#parallax-bg-6 div div .headline { text-align: center; font-size: 21px; margin-bottom: 1em; }

#parallax-bg-7 div div { position: absolute; left: 50%; top: 2600px; transform: translate(-50%, 0); }
#parallax-bg-7 div div img { width: 900px; }

#parallax-bg-8 div div { position: absolute; left: 50%; top: 3500px; transform: translate(-50%, 0); font-size: 36px;font-family: Microsoft JhengHei, sans-serif; font-weight: 200; text-align: center; }

#parallax-bg-9 div div { position: absolute; left: 50%; top: 4000px; transform: translate(-50%, 0); font-family: 'Cardo', 'Noto Serif TC', serif; text-align: center; }
#parallax-bg-9 div div span { font-style: italic; text-align: center; color: #988057; font-size: 21px; display: block; width: 100px; height: 100px;background: #fff; border: 1px #988057 solid; transform: rotate(45deg); }
#parallax-bg-9 div div span i { font-style: normal; display: block; }
#parallax-bg-9 div div span p { padding-top: 25px; margin-left: -20px; transform: rotate(-45deg); }

#parallax-bg-1, #parallax-bg-4, #parallax-bg-8 { z-index: 10!important; }

.footer-grid { border-top: #988057 1px solid; background: #fff; text-align: center; }
.footer-grid figure { display: inline-block; margin-left: -5px; width: 20%; vertical-align: top; }
.footer-grid figure figcaption a { padding: 5em 0; display: block; }
.footer-grid figure figcaption a { color: #898989; font-size: 18px; }
.footer-grid figure figcaption a .title { display: none; font-style: italic; font-size: 13px; }
.footer-grid figure figcaption a .title span { margin-left: 5px; font-size: 21px; }
.footer-grid figure figcaption.active a , .footer-grid figure figcaption a:hover { background: #FBFBFB; opacity: 1; }
.footer-grid figure figcaption.active a .title { color: #4D4D4D; }
.footer-grid figure figcaption.active a p { color: #988057; }

/* Footer */
footer { position: relative; border-top: #988057 1px solid; background: #fff; padding: 50px 0; }
footer ul { margin-left: 2em; }
footer li { display: inline-block; margin-right: 2em; }
footer li i { margin-right: .5em; }
.footer-copy { border-top: #988057 1px solid; padding: 15px 0; text-align: center; font-size: 11px; color: #A3A3A3; }
.link-esd { position: absolute; right: 2em; top: 50%; transform: translate(0, -50%); width: 100px; height: 54px; display: none; }
.link-esd img { display: block; width: 100%; }

/* 大美力家 & 最新優惠 */
.event-wrapper { font-size: 150%; margin: 0 auto; max-width: 1000px; padding: 5em 30px; }
.event-wrapper img { display: block; margin: 2em auto 0; box-shadow: 0 0 25px #e6e6e6; max-width: 100%; width: 100%; }
.event-wrapper ul { margin: 0 0 1.5em 1.25em; list-style-type: decimal;/*margin: 0 0 1.5em 0;*/ }
.event-wrapper ul li { /*position: relative; padding-left: 1.25em;*/ }
.event-wrapper ul li::before { content: ' '; font-size: 0; letter-spacing: 0; }/*
.event-wrapper ul li::before { font-family:'FontAwesome'; content: "\f105"; font-size: 18px; position: absolute; left: 0; top: 2px; }*/
.event-wrapper ul li ol { margin: 0; }
.event-wrapper ol { margin: 1.5em 0; /*list-style: circle;*/ }
.event-wrapper ol li { position: relative; padding-left: 1em; }
.event-wrapper ol li::before { font-family:'FontAwesome'; content: "\f111"; font-size: 11px; position: absolute; left: 0; top: 9px; }
.event-wrapper .headline { color: #988057; font-size: 135%; }
.event-wrapper .subhead { margin-bottom: 1em;  }
.event-wrapper .date { color: #988057; font-style: italic; margin-bottom: 1.5em; }
.event-wrapper p { margin: .5em 0; }
.event-wrapper span { display: inline-block; margin-bottom: .5em; border-bottom: #988057 2px solid; }
.event-wrapper .note { display: block; font-size: 80%; margin-top: 1em; }
.all-devices .toggle-btn-visible { position: static; visibility: visible; }
.all-devices .toggle-target-hidden { display: none; }
.all-devices .toggle-target-expanded { display: block; }
.event-wrapper button { font-size: 18px; width: 100%; border: #F2F2F2 solid 1px; background: #F2F2F2; margin: 5em auto 0; padding: 1.5em; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.event-wrapper button:hover { background: #fff; }
.event-wrapper button i { margin-left: 1em; }

hr { border-top: 1px solid #988057; padding: 0; margin: 0;  }

.mobile img.img2 { display: none; }