@charset "utf-8";


@font-face{ font-family: 'PingFang TC'; font-weight:100; src: local('PingFangTC-Ultralight'); }
@font-face{ font-family: 'PingFang TC'; font-weight:200; src: local('PingFangTC-Thin'); }
@font-face{ font-family: 'PingFang TC'; font-weight:300; src: local('PingFangTC-Light'); }
@font-face{ font-family: 'PingFang TC'; font-weight:400; src: local('PingFangTC-Regular'); }
@font-face{ font-family: 'PingFang TC'; font-weight:500; src: local('PingFangTC-Medium'); }
@font-face{ font-family: 'PingFang TC'; font-weight:600; src: local('PingFangTC-Semibold'); }
@font-face{ font-family: 'PingFang TC'; font-weight:700; src: local('PingFangTC-Semibold'); }
@font-face{ font-family: 'PingFang TC'; font-weight:800; src: local('PingFangTC-Heavy'); }

/* ===============  HTML5 display definitions  =============== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; } 
[hidden] { display: none; }

/* ===============  Base  =============== */
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;  }
body { width:100%; height:100%; margin: 0;  overflow-x:hidden;  position:relative; 
		 font-size: 100%; line-height: 100%; font-weight:400;
		 font-family:  'Century Gothic', 'Myriad Pro', 'PingFang TC', 'Helvetica Neue', 'Helvetica', 'Arial',  'Heiti', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif; 
		 text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern';                                    
		 -webkit-overflow-scrolling: touch;  }
p{ font-family:  'Myriad Pro', 'Helvetica Neue', 'PingFang TC', 'Helvetica', 'Arial', 'Heiti', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif;  }
*{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  margin:0; padding:0; } 
a{ text-decoration:none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; color:inherit; }
a:, a:hover { outline: 0; }
img { border: 0; max-width:100%; height:auto; vertical-align:top }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
dl, menu, ol, ul { margin: 0; }
ul{ list-style:none; list-style-image: none; }
table { /*border-collapse: collapse;*/ border-spacing: 0; }
button, input, select, textarea { font-family: inherit;  }

:focus, :active { outline: none; }
 

/* ===============  Global  =============== */
.container{ width:90%; margin-right: auto; margin-left: auto; max-width:1130px; position:relative; }
.container_s{ width:80%; margin-right: auto; margin-left: auto; max-width:900px; position:relative;   }
.posREL{ position: relative; }
.txtCenter{ text-align: center; }
.txtRight { text-align: right; }
.txtLeft { text-align: left; }

.R{ float:right; }
.L{ float:left;}
.R:after, .L:after{ clear:both; }
.M{ margin-left:auto; margin-right:auto;}
.clear{ clear:both; }
.black{ color: #000; }
.w100{ width: 100% ; }
 
.font12{ font-size:.75rem; }
.font13{ font-size:.813rem; }
.font14{ font-size:.875rem; }
.font18{ font-size: 1.625rem; }
.font24{ font-size:1.5rem;   }
.font26{ font-size:1.625rem; line-height:1em;  }
.ffLight{ font-weight: 300; }

.font-b{color:#000;}


.font-rage{ font-family:'RageItalic'; }
a.xCLOSE{  display:block; vertical-align:top; width:80px; height:80px; position:relative; margin: 2em auto; }
a.xCLOSE span:before, a.xCLOSE span:after { cursor: pointer; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; height: 2px; width: 50px; /*background: #C7C7C7;*/ background:rgba(30,30,30,0.9); display: block; content: ''; position: absolute; top: 50%;left:50%;  margin-left:-25px; }
a.xCLOSE span:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);   }
a.xCLOSE span:after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform:  rotate(-45deg);   }
a.xCLOSE:hover{ transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2);} 
a.xCLOSE:hover span:before, a.xCLOSE:hover span:after { background: #FFF; 
transition-duration:1s; -webkit-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-duration:1s;  }

a.xCLOSE_bk{  display:block; vertical-align:top; width:80px; height:80px; position:relative; margin: 2em auto; }
a.xCLOSE_bk span:before, a.xCLOSE_bk span:after { cursor: pointer; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; height: 2px; width: 50px; background: #C7C7C7; display: block; content: ''; position: absolute; top: 50%;left:50%;  margin-left:-25px; }
a.xCLOSE_bk span:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);   }
a.xCLOSE_bk span:after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform:  rotate(-45deg);   }
a.xCLOSE_bk:hover{ transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2);} 
a.xCLOSE_bk:hover span:before, a.xCLOSE_bk:hover span:after { background: #333; 
transition-duration:1s; -webkit-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-duration:1s;  }

.aa3{ display:inline-block; padding:.6em 1.5em; border:1px solid #FFF; color:#FFF; margin-top:2em; margin-bottom: 2em;}
.aa3:hover{ background: #fff; color:#333; }
.aa3_bk{ display:inline-block; padding:.6em 1.5em; border:1px solid #000; color:#000; margin-top:.5em; margin-bottom: .5em;}
.aa3_bk:hover{ background: #000; color:#fff; }
.aa4{}
.aa4:hover{ text-decoration: underline; }
.colorGold{ color:#C38E43; }

/* ===============  Typography  =============== */
h1 { font-size: 6.25rem  /*100px*/; font-weight:300; line-height:1em;}
h2 { font-size: 2.625rem  /*42px*/; font-weight:normal; line-height:150%;}
h3 { font-size: 2.25rem   /*36px*/; font-weight:normal; line-height:130%;}
h4 { font-size: 1.313rem  /*21px*/; font-weight:normal; line-height:1.1em;}
h5 { font-weight:normal; }
h6 { font-size: 1.125rem  /*18px*/; font-weight:normal;  line-height:1.1em; }


@media screen and (max-width:980px){
	h1 { font-size: 4rem !important ; }
	h2 { font-size: 2rem !important ;  } 
	}
@media screen and (max-width:600px){
	h1 { font-size: 3rem !important ;  }
	}

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
mark {  }
pre { white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
hr { border:0;}
p{ line-height:150%;}
 
/* ===============  Forms  =============== */
form { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;  }
button, input { line-height: normal; }
button, html input[type="button"], 
input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

/* ===============  Header  =============== */
.wrapperH100{ position: relative; height: 100%; width:100%;  overflow:hidden;}
header{ width:100%; position:fixed; top:0; left:0; right:0; z-index: 999;}

/*背景輪播*/
.sliderPC{ overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%;}
.sliderPC div {width:100%; height:100%; background:#FFF;}

/* Slider */
.slick-slider
{ position: relative;display: block;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;}
.slick-list{ position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging{cursor: pointer;cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.slick-track{position: relative;top: 0;left: 0;display: block;}
.slick-track:before,
.slick-track:after
{display: table;content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{display: none;float: left;height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{display: block;}
.slick-slide.slick-loading img{display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide
{visibility: hidden;}
.slick-vertical .slick-slide
{display: block;height: auto;   }
.slick-arrow.slick-hidden {display: none;}

.slick-slide:focus, .slick-slide a:focus{ outline: none; }

/* Slider */
.slick-prev,
.slick-next{ z-index: 99; position: absolute; top:45%; display:block; width: 80px; height: 80px; margin-top:0px; padding:0; cursor:pointer;  color:transparent;  border:none; outline:none; opacity:.7;  
background-repeat: no-repeat; background-position: center center; background-size: auto 60px; background-color: transparent;   }
.slick-prev{ left: 0; background-image:  url(../img/slick_arL.svg);    }
.slick-next{ right: 0;  background-image:  url(../img/slick_arR.svg) ; } 
.slick-prev:hover, 
.slick-next:hover{ /*background-color: rgba(0,0,0,0.8); border-radius:1px;*/ opacity: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.slick-prev:hover{ background-position: 30% center; } 
.slick-next:hover{ background-position: 70% center; }


/* Dots */
.slick-slider { }
.slick-dots { position: absolute; bottom:-3em; display: block; width: 100%; padding: 0; list-style: none; text-align: center; }
.slick-dots li
{ position: relative; display: inline-block;width: 20px;height: 20px;margin: 0 5px;padding: 0;cursor: pointer;}
.slick-dots li button
{ font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none;background: transparent; }
.slick-dots li button:hover,
.slick-dots li button:focus
{outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{opacity: 1;}
.slick-dots li button:before
{ /*font-family: 'slick';*/ font-size: 30px; line-height: 20px; position: absolute; top:0; left: 0; width: 20px; height: 20px; content: '•';text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.slick-dots li.slick-active button:before
{ opacity: .75; color: black; }


@media screen and (max-width:1024px){
	.sliderPC .slick-prev,
	.sliderPC .slick-next{ visibility: hidden; }
	}

 /* ===============  NAV  =============== */
/* CSS Document */
nav, .navbar-toggle { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
nav {  position:fixed; z-index: 9910; background-color: rgba(247,144,33, 0.95); width: 100%; height: 100%; text-align: center;  /*display: table; */ color: white; left:0; top:0;}
.nav-hide { display: none; }
.inner{ display: table-cell; vertical-align: middle; }

.nav_tb{ display: table; position: absolute; width: 100%; height: 100%; text-align: center; }
.nav_tc{ display: table-cell; vertical-align: middle;  }
nav .nav01 { /*display: table-cell; vertical-align: middle; padding-left: 0 !important; margin:0 auto;*/ margin: 0 auto; width:80%; max-width:420px; }
nav .nav01 li { list-style: none; margin-bottom:.5em;  }
nav .nav01 li a { text-decoration: none; display:block; padding: 1.3em 0;   }
nav .nav01 li a span{ display:inline-block; text-align:justify; line-height: 1;}
nav .nav01 li a span:nth-child(1){font-size:1.5rem; color:#FFF; width:5em; }
nav .nav01 li a span:nth-child(2){font-size:1rem; color:#AA6300; width:10em;  }
nav .nav01 li a span:only-child{width: 11.667em;}
nav .nav02 { text-align:center; margin: 2em auto; }
nav .nav02 li{ display:inline-block; vertical-align: middle;  }
nav .nav02 li:after { display:inline-block; content:'/'; color:#AA6300; margin: 0 1.3em;}
nav .nav02 li:last-child:after{ display:none; }
nav .nav02 li a{ color: #FFF;  }
.navbar-toggle { position:absolute; top: 0px; right: 0px; width: 48px; height: 36px; /*height: 44px;*/  z-index: 9920; cursor: pointer; background:#F79021; padding-top:11px;}
.navbar-shop { position:absolute; top: 0px; right: 48px; width: 48px; height: 36px; /*height: 44px;*/  z-index: 9920; background:#F79021; padding-top:7px; text-align:center;}
.navbar-shop img{ display:block; height:75%; margin:auto;}
.bar1, .bar2, .bar3 { width: 50%; height: 2px; margin-bottom: 5px; background-color: #000; transition: all 0.3s ease-in-out; margin:0 auto 5px;}
.navbar-on .bar1, .navbar-on .bar2, .navbar-on .bar3 { background-color: white; }
.navbar-on .bar1 { transform-origin: 10% 40%; -webkit-transform-origin: 10% 40%; -ms-transform-origin: 10% 40%; transform: rotate(45deg); -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg); }
.navbar-on .bar3 { transform-origin: 10% 40%; -webkit-transform-origin: 10% 40%; -ms-transform-origin: 10% 40%; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);  }
.navbar-on .bar2 { background-color: transparent; }

@media (max-height:700px){ 
	nav .nav01 li{ margin-bottom:0; }
	nav .nav01 li a{ padding: .8em 0; }
	nav .nav01 li a span:nth-child(1){ font-size: 1.2rem; }
}
@media (max-width:520px){ 
	nav .nav01 li a span:nth-child(2){ display:none; }
	nav .nav02 { font-size:.9rem; }
	nav .nav02 li:after{ margin: 0 .5em; }
	nav .nav01 li a span:only-child{width: 5em;white-space: nowrap;}
}
@media (max-width:360px) and (max-height:600px){ 
	nav .nav01{ margin: 0 auto 1em auto; }
		nav .nav01 li {  margin-bottom:0;  }
	nav .nav01 li a {  padding: .8em 0;   }
	nav .nav01 li a span:nth-child(1){ font-size: 1.2rem; }
	nav .nav02 { width:90%; margin: 0 auto; font-size:.9rem; }
	nav .nav02 li{ width: 43%; margin-bottom:.3em; position:relative;   }
	nav .nav02 li a{ padding: .6em 0; display:block; }
	nav .nav02 li:after{ margin:0; position:absolute; top:50%; right:1px; margin-top: -0.5em;  }
	nav .nav02 li:nth-child(2n+2):after{ display:none; }
}


.nav03{ margin:1em auto; display:none;  }
.nav03 li{ display:inline-block; margin: 0 .2em; }
.nav03 li a { display: block; width:2em; height:2em; line-height:2em; font-size: .8rem; border:solid 1px transparent; border-radius: 50em;  }
.nav03 li:hover a, .nav03 li.-on a{ background: #fff; color: #EA601F; } 


 /* ===============  Navigation  =============== */
#LOGO{display:inline-block; width:215px; position:fixed; top:28px; z-index:999; }
.menuR{ width:243px; position:absolute; top:40px; right:0; }
.menuR_lang{ width:147px; height:36px; background: rgba(0,0,0,0.7); color:#fff; font-size:.9em; font-family:  'Myriad Pro', 'Helvetica Neue', 'Helvetica', 'Arial', 'MHei', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif;    }
.headerBLK{ background:#111; width:100%; height:110px; }
@media screen and (max-width:640px){
	.menuR_lang{ display:none; }
	.nav03{ display: block;  }
	#LOGO{ height:50px; }
	#LOGO img{ height:100%; width:auto; }
	}
@media screen and (max-width:400px){ 
	#LOGO{ height:38px;  top:16px;}
	.menuR{ top: 16px; }
	.headerBLK{ height:65px; } 
	}

 
.indexTitle{ color:#FFF; position:absolute; bottom: 20%; left:0; right:0; max-width:1130px; width:90%; margin:auto;   }
.indexTitle h1{ font-size:3.5em; line-height: 1.1em;  margin-bottom: 20px; text-shadow: 2px 0px 20px rgba(0, 0, 0, 0.6);   }
.indexTitle p { font-family:'RageItalic'; font-size: 3.2em; font-weight: 500; letter-spacing:1px; line-height: 1em;  text-shadow: 2px 0px 20px rgba(0, 0, 0, 0.6); }
@media screen and (max-width:900px){
	.indexTitle h1{ font-size: 2.5em !important;}
	.indexTitle p{ font-size: 2em !important;; }
}
@media screen and (max-height:700px){
	.indexTitle{ bottom: 30%; }
}
@media screen and (max-height:600px){
	.indexTitle h1{ font-size: 2em !important; }
	.indexTitle p{ font-size: 1.76em !important; }
}
/*
.indexTitle h1{ opacity: .3;  transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; }
.indexTitle p { opacity: .3; transform: translateX(6%); -webkit-transform: translateX(6%); -ms-ransform: translateX(6%); -moz-ransform: translateX(6%); -o-ransform: translateX(6%);  transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; }
#slide_ind [aria-hidden=false] .indexTitle h1,
#slide_ind [aria-hidden=false] .indexTitle p{ opacity: 1; -webkit-transform: translateX(0);  transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0);   }*/


.aaNews { display:table; position:absolute; bottom: 20%; right:16%; width:150px; height:150px; border:2px solid #7AE0D5; background:rgba(0,0,0,.7); border-radius:50%; z-index: 99; 
	text-align:center; color:#fff; animation-delay: .3s; -webkit-animation-delay: .3s }
.aaNews div { display:table-cell; vertical-align:middle; line-height:1em; }
.aaNews p:nth-child(1){ font-size:1.8rem; font-weight:bold;  }
.aaNews p:nth-child(2){ letter-spacing:1px;  }
.aaNews hr{ margin:1em auto; background: #7AE0D5; height:1px; width: 4.2em;  } 
.aaNews:hover{ background: #7AE0D5;  }
.aaNews:hover hr{ background: #fff; width: 6em; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s;   }

@media screen and (min-width:901px) and (max-width:1400px){ .aaNews{ right: 5%; } }
@media screen and (max-width:900px){ .aaNews{ display:none;} }

.scrollArrow { display:inline-block; width:80%; max-width:300px; text-align:center; position:absolute; bottom:4em; left:0; right:0; margin:auto; z-index: 99; }
.scrollArrow i{ width:38px; height:38px; display:block; margin:0 auto .5em; border:5px solid #FFF; border-radius:50%; background: rgba(0,0,0,0.5) url(../img/arrow.png) no-repeat center center; }
.scrollArrow p { font-size:.875rem; color:#FFF; text-shadow: 2px 0px 12px rgba(0, 0, 0, 0.7);  }
.scrollArrow:hover{ bottom:3.5em; }

@media screen and (max-width:450px){ .scrollArrow i{ width: 26px; height:26px; border:3px solid #FFF; }  }

/* =============== 中間連結區  =============== */
.linkBox { width:100%;}
@media only screen and (min-width:1000px) and (max-width:1300px) {
	.indexLike-side li .img{ overflow:hidden; }
	.indexLike-side li .img img { height:240px; width:auto; max-width: none; }
	}


.linkBox ul:after{ clear:both; content:''; display: block;  }
.linkBox li:after{ clear:left; content:''; display: block;  }
.linkBox li{ width:50%; float:left; display:table; overflow:hidden; vertical-align:top; }
.linkBox li .img, .linkBox li .txt { display: table-cell; width:50%; vertical-align:top;  }
.linkBox li .img img { width:100%; vertical-align:top; }
 
.linkBox li .txt{ position:relative;  }
.linkBox li .txt h3, .linkBox li .txt p { padding:40px; width:100%;  }
.linkBox li .txt h3{ font-size:1.875rem; font-weight:bold; position: absolute; left:0;      }
/*.linkBox li .txt h3:before { content:'+'; color:#7E7E7E; display:inline-block; float:right;   }*/
.linkBox li .txt p { font-size:1.125rem; line-height:150%; position: absolute; left:0;   }
.linkBox a:hover h3:before, .linkBox a:hover h3:after{ color:#999; transform-origin: 50% 51%; -webkit-transform-origin: 50% 51%; -ms-transform-origin: 50% 51%;  
-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;  }	
 

.linkBox li:nth-child(odd){ background: #000; }
.linkBox li:nth-child(odd) h3{ color: #F2BA0C; top:0;}
.linkBox li:nth-child(odd) p{ color:#FFF; bottom:0;  }
.linkBox li:nth-child(even){ background: #F7C221; /*border-bottom:solid 1px rgba(0,0,0,0.8);*/ }
.linkBox li:nth-child(even) .txt h3{ color: #FFE8A1; bottom:0; }
.linkBox li:nth-child(even) .txt p { top:0; color:#000; }
/*.linkBox li .txt h3:after { content:'+'; color:#7E7E7E; display:inline-block; float:right;   }*/
.linkBox li:nth-child(odd)  .txt h3:before,
.linkBox li:nth-child(even) .txt h3:after{
	 content:'+'; color:#7E7E7E; display:inline-block; float:right; margin-right: -5px;
}

.linkBox li:nth-child(4n+3){ background: #F7C221}
.linkBox li:nth-child(4n+3) h3 { color: #FFE8A1;}
.linkBox li:nth-child(4n+3) P { color: #000;}
.linkBox li:nth-child(4n+4){ background: #000}
.linkBox li:nth-child(4n+4) h3{ color: #F2BA0C !important;}
.linkBox li:nth-child(4n+4) p { color:#FFF;}

.triangle { width: 0; height: 0; border-style: solid; position:absolute; top:10%;}
.linkBox li:nth-child(4n+1) .triangle { border-width: 13px 16px 13px 0; border-color: transparent #000 transparent transparent; left:-13px;}
.linkBox li:nth-child(4n+2) .triangle { border-width: 13px 0 13px 16px; border-color: transparent transparent transparent #F7C121;right:-13px}
.linkBox li:nth-child(4n+3) .triangle { border-width: 13px 16px 13px 0; border-color: transparent #f7c121; transparent transparent; left:-13px;}
.linkBox li:nth-child(4n+4) .triangle { border-width: 13px 0 13px 16px; border-color: transparent transparent transparent #000;right:-13px}

@media only screen and (min-width:901px) and (max-width:1400px) {
 .linkBox li .txt h3, .linkBox li .txt p { padding:20px; }
 }
@media only screen and (min-width:901px) and (max-width:1200px) {
 .linkBox li .txt h3{ font-size:1.4rem;    } 
 }
@media only screen and (max-width:900px) {
 .linkBox li{ width:100%;  }
 }
@media only screen and (max-width:700px) {
	 .linkBox li .txt h3{ font-size: 1.2em;    } 
	 .linkBox li .txt p{ font-size: .9rem;    } 
 }
@media only screen and (max-width:520px) {
	.linkBox li .txt h3{ font-size: .9em;    } 
		.linkBox li .txt h3, .linkBox li .txt p { padding: 1.2em .7em; }
 }

.diyIND{ width:100%; }
.diyLink { display:table; width:100%;  }
.diyLink > li { display:table-cell; width:50%; vertical-align: middle; overflow:hidden; position:relative;}
.diyLink_img img { width:100%; }
.diyLink_txt { background: #f0f0f0; /*padding:0 5em; */ }
.diyLink_inner {  position:relative; /*margin-bottom:3em; */   width:80%; max-width:500px; margin:auto; padding-bottom: 6em;   }
.diyLink_txt  h2{ font-size:3em; color:#FF9000; padding-bottom:1em; line-height:120%;  }
.diyLink_txt  h3{ font-size:1.8em; font-weight:bold; line-height:2.5em;   }
.diyLink_txt  p{ font-size:1.1em; line-height: 1.8em;   }
.diyLink_txt .aaLinks { position:absolute; bottom:0; left:0; }
.aaLinks{ width:100%; }
.aaLinks li{ display:inline-block; border-right:1px solid #FF9000; margin: .5em 1em .5em 0 ;   }
.aaLinks li a{ font-size:1.1em; font-weight:bold; color:#000; padding:0 1em 0 0; display:block;    }
/*.aaLinks li:first-child a { padding-left:0; }*/
.aaLinks li:last-child { border:none; }
.aaLinks li a:hover{ color: #FF9000;}

@media only screen and (min-width:901px) and (max-width:1100px) {
	.diyLink_txt  p{ font-size:1em;   }
	.diyLink_img { height:480px; } 
 	.diyLink_img img { transform:scale(1.7,1.7); -webkit-transform:scale(1.7,1.7); -moz-transform:scale(1.7,1.7); -ms-transform:scale(1.7,1.7); -o-transform:scale(1.7,1.7); } 
}
@media only screen and (max-width:900px) {
	 .diyLink > li { width:100%; display:block;  }
	 .diyLink_txt { padding: 3em 0; }
	 .diyLink_inner{ position:relative;   }
	 
}
@media only screen and (max-width:500px) {
	 .aaLinks li a{ font-size:1em;  }
	 .diyLink_inner{ width:90%;}
}

.linkSide{ width:100%;}
/*.linkSide ul li{display:inline-block; vertical-align:top; overflow:hidden;  }*/
.linkSide ul li img { width:100%; height:auto; } 
.linkSide ul li a:hover img { -webkit-filter:brightness(.8);filter:brightness(.8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.grid-sizer{ opacity:0; }
.linkSide .grid-sizer, .linkSide .grid-item{ width:25%;  }
.linkSide .grid-item.w50{ width:50%; }
.w50{ width:50%;}
.w25{ width:25%;}

@media screen and (max-width: 720px){
	.linkSide .grid-sizer, .linkSide .grid-item{ width: 50%; }
	.linkSide .grid-item.w50{ width: 100%; }
	}


/*首頁最新消息*/
.newsIND { width:90%; margin:6em auto 3em auto; max-width:1130px;  }
.newsIND-line{ border-bottom:1px solid #C8C8C8; padding-bottom:2.5rem; }
.newsIND li .inner {  margin:0 auto; padding: 2.3em 1em; max-width:240px; position:relative;     }
.newsIND li .inner .img { width:180px; height:180px; margin:0 auto 1.3em auto; }
.newsIND li .inner .img img{ border-radius:50%; }
.newsIND li .inner .date{ position:absolute; left:0; top:0; z-index:999; width:4em;}
.newsIND li .inner .date span{ font-size:2.25rem; font-weight:bold; color:#C7C7C7; line-height:.9em;}
 
.newsIND li .inner h4{ font-size:1.125rem; font-weight:bold;  line-height:1.5em; /*width:155px;margin-bottom:1.75em;height:2.2em;*/
 			height: 2.9em;  overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  }
.newsIND li .inner hr { width:36px; height:1px; background:#C5C5C4; margin: 1.2em 0; }
.newsIND li .inner p{ font-size:1rem; /*width:160px;*/ line-height: 1.5em; margin-bottom:3em; /*margin-top:.9em;*/ height:2.2em; }

.aa1{ color: #000; display:block;  } 
.aa1:hover{ color: #555; }
.aaBlueCircle{ font-size:1.5em; font-style:normal; color:#FFF !important; display:block; width:38px; height:38px; border-radius:50%; background:#7AE0D5; text-align:center; line-height:38px; margin:0 auto;   }
.aaBlueCircle:hover{ background: rgba(58,196,195,1.00); }
.aa1:hover .aaBlueCircle{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); text-decoration:none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

@media screen and (min-width:366px) and (max-width:450px){
	.newsIND li .inner .img { width:9em; height:9em; }
	.newsIND li .inner .date span{ font-size:2rem; }
	}
@media screen and (min-width:341px)  and (max-width:365px){
	.newsIND li .inner .img { width:7em; height:7em; } 
	.newsIND li .inner .date span{ font-size:1.8rem; }
	}
@media screen and (max-width:800px) and (max-height:800px){	
	.newsIND { margin: 3em auto 1em auto;}
	.newsIND .aaBlueCircle{ display:none;}
}
@media screen and (max-width:340px){
	.newsIND { width:100%; }
	}

/*最新消息區*/
.news-Side { background:url(../img/news-bg.jpg) no-repeat; background-size:cover; padding: 7em 0 5em 0;}
.news-Index{ background:#FAFAFA url(../img/news-bg01.jpg) no-repeat; background-size:cover;}
.news-Side .top{ width:100%; position:relative;}
.news-Index .top{ text-align:center;}
.news-Index .title{  }
.news-Index .title hr { width:67px; height:1px; background:#CCC; margin:3em auto 2.3em auto; }
.news-Index .title p{ line-height:180%; }
.news-Side .top .title,.news-Side .top .menu{display:inline-block; }
.news-Side .title h3{ font-size:3rem;  color:#7AE0D5; line-height: 1.2em; }
.news-Side .title h4{ font-size:1.875rem;}

@media screen and (max-width:680px){ 
	.news-Index .title p br{ display:none; }
	.news-Index .title p{ font-size: .85rem; }
	.news-Index .title hr {  margin:2em auto; }	
	}
@media screen and (max-width:360px){
	 /*.news-Side{ padding-top: 4em; }*/
	.news-Side .title h3{ font-size: 2rem;}   
	 .news-Side .title h4{ font-size:1.5rem;}
	}
@media screen and (max-width:500px) and (max-height:800px){	
	.news-Side{ padding: 4em 0 1em 0; } 
}
	
.news-Side .menu{ position:absolute; right:0; bottom:0;}
.news-Side .menu select{ font-size:.875rem; width:147px; height:37px; border:1px solid #000; text-indent:.5em;vertical-align:top; margin-right:-4px; }
.news-Side .menu a { display:inline-block; width:48px; height:37px; border:1px solid #000; line-height:37px;vertical-align:top; background:#FFF; text-align:center; font-weight:bold;}
.news-Side .menu a:hover{  }

.newsChoose{  display:inline-block; position:absolute; right:0; bottom:0; border:1px solid #000;  background:#FFF; height:40px;   }
.newsSelect{ display:inline-block; width:147px; height:38px;      }
.newsChoose a{  display:inline-block; width:40px; height:38px; border-left:1px solid #000; line-height:38px;vertical-align:top; background:#FFF; text-align:center; font-weight:bold;  }
.newsBox { margin:3em auto; /*border-bottom:1px solid #ccc;*/ width:100%; position:relative; }
.newsBox > li{ display:inline-block; vertical-align:top; width:25%; margin-right: -4px; padding:3em 0; position:relative;  }
.newsBox > li:after{  width:100%; background: #ccc; height:1px; content:''; display:block; position:absolute; bottom: 1px; left:0; }
.newsBox:after{  width:100%; background: #ccc; height:1px; content:''; display:block; position:absolute; bottom:0; left:0; }
.newsBox li .inner {  margin:0 auto; padding: 2.3em .5em; /*max-width:240px;*/  position:relative; width:90%; max-width:14em; display:block; }
.newsBox li .inner .img { width:10em; height:10em; margin-bottom:1.3em; background: #333; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%;  }
.newsBox li .inner .img img{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; }
.newsBox li .inner .date{ position:absolute; left:0; top:0;  width:4em;}
.newsBox li .inner .date span{ font-size:2.25rem; font-weight:bold; color:#C7C7C7; line-height:.9em;}

.newsBox li .inner h4{ font-size:1.125rem; font-weight:bold; /*width:155px; margin-bottom:1.75em;*/ line-height:1.5em; height:3em; }
.newsBox li .inner hr { width:36px; height:1px; background:#C5C5C4; margin: 1.6em 0;   }
.newsBox li .inner p{ font-size:1rem; /*width:160px;*/ line-height: 1.5em; /*margin-bottom:3em; margin-top:.9em;*/ height:3em; }
.newsBox li .inner h4, .newsBox li .inner p{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.newsBox li:hover .img img{ opacity:.5; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;  }

@media screen and (max-width:900px){
	.newsBox > li{ width:33%; padding: 2em 0; }
	.newsBox .aaBlueCircle { display:none; }	
	}
@media screen and (max-width:700px){
	.newsBox li .inner .img { width: 8em; height: 8em;  margin:0 auto 1em auto;  }
	}
@media screen and (max-width:600px){
	.newsBox li .inner h4{ font-size:1rem;  }
	.newsChoose{ position:relative; margin-top:2em; }
	.newsBox > li{ width:50%;  }
	}
@media screen and (max-width:330px){
	 .newsBox > li{ width:100%;  }
	 .newsBox{ margin: 1em auto; }
	}

.buttonSide, .newsClassBtn { text-align:center; margin-top:3em;}
.buttonSide a, .newsClassBtn a{ border:1px solid #000; text-align:center; display:inline-block; padding:.5em 1.2em; color:#000; margin:.5em;  border-radius: 2px; }
.buttonSide a:hover, .buttonSide a.-on { background:#7AE0D5; border:1px solid #7AE0D5; color:#fff;  }

/*.loadMore{ font-size:1.125rem; display:block; color:#000; position:absolute; left:48%; margin-top:5rem; }*/
.loadMore{ font-size:1.125rem; display:block; color:#000; width:80%; max-width:10em; line-height:1.1em; margin:3em auto; text-align:center; }
.loadMore:after { display:block; content:url(../img/arrow-black.png);text-align:center;}



/*.news-detail{ padding:11em 0; position:relative; text-align:center; border-width:20px; border-style:solid; border-color:red; }*/ 
.news-detail{ background: #fff; padding:5em 0 8em 0; width:100%; min-height:100%; position:absolute; top:0; left:0;  /*border-width:20px; border-style:solid;*/ border:solid 20px #FFD24D;  }
.news-detail > .x{ top:5em; }
.news-detail-tt{ text-align:center; position:relative; padding: 1em 0 3em 0; border-bottom: solid 1px #c7c7c7; margin-bottom: 2em;  }
.news-detail-tt .date{ margin-bottom:.9rem; }
.news-detail-tt .titleB{ font-size:1.8rem; font-weight:600; margin-bottom:1em;  }
.social { text-align:center; display:inline-block; vertical-align:middle; }
.social a{ display:inline-block; margin-left:.5em;}
.social .fb { width:11px; height:20px; background:url(../img/fb.png) no-repeat center center;}
.social .twitter {width:20px; height:16px; background:url(../img/twitter.png) no-repeat center center;}
.social .google { width:18px; height:20px; background:url(../img/google.png) no-repeat center center;}
.news-detail hr { height:1px; width:100%; background:#C7C7C7; margin-top:2.5rem;}
.news-content { color:#333; text-align:left; line-height:170%;  }
.news-content .title { font-size:1.4rem; color:#333; padding:2em 0; letter-spacing:1px;}
.news-content .word p { margin:1em auto; }

.all { border-color:#333}
.newsLine {  border-color:#FFD24D;}
.favorLine { border-color:#B4C030;}
.mediaLine { border-color:#75D8CF}

@media screen and (max-width:500px){  .news-detail{ border-width: 10px !important; }    }
@media screen and (max-height:900px){ .news-detail{ padding: 1em 0 3em 0; } }
	

.allBtn:hover, .allBtn.-on  { background:#333; border-color:#333; color:#FFF; }
.newsBtn:hover, .newsBtn.-on   { background:#FFD24D; border-color:#FFD24D; color:#222;  }
.favorBtn:hover, .favorBtn.-on  { background:#B4C030; border-color:#B4C030; color:#FFF; }
.mediaBtn:hover, .mediaBtn.-on  { background:#75D8CF; border-color:#75D8CF; color:#FFF; }

.editBox a{ text-decoration:underline; color: #000;  }
.editBox a:hover{ text-decoration:none;    }
.editBox ul{ margin:2em auto; }
.editBox li{ margin-bottom:1em; position:relative;  padding-left:1.2em; }
.editBox li:before{ content:'+';  color:rgba(58,196,195,1.00); position:absolute; top:0; left:0;  }
.editBox h6, .txtBLKbox{ display: inline-block; line-height:inherit; font-size:inherit; padding: .3em 1em; background: #000; color:#fff; }
.editBox img{ height: auto !important;}

/* =============== 連絡資訊區 =============== */
.infoSide { width:100%; padding:1em 0; }
/*.infoSide .container ul li { width:50%; display:inline-block; vertical-align:middle; margin-right:-4px;   }
.infoSide ul li:nth-child(1) > div { display:inline-block; margin-right:-4px;}
.infoSide ul li:nth-child(1) > div:nth-child(1){padding-right:40px; border-right:1px solid #CCC;}
.infoSide ul li:nth-child(1) > div:nth-child(1) h3{ font-size:3rem; color:#7A99E0; margin-bottom:.1em}
.infoSide ul li:nth-child(1) > div:nth-child(1) p{ font-size:1.875rem; font-weight:bold;   }
.infoSide ul li:nth-child(1) > div:nth-child(2) { padding-left:40px;}
.infoSide ul li:nth-child(1) > div:nth-child(2) h6{ font-size:1.125rem; font-weight:bold; margin-bottom:22px;}
.infoSide ul li:nth-child(1) > div:nth-child(2) p{ font-size:.875rem;  font-weight:bold; padding-bottom:6px}
.infoSide ul li:nth-child(1) > div:nth-child(2) p:before{ content:'+'; display:inline-block; color:#7A99E0; font-weight:normal; padding-right:5px }
.infoSide ul li:nth-child(2) {text-align:right; vertical-align:middle}
.infoSide ul li:nth-child(2) a{ font-size:1rem; color:#000; font-weight:bold; border:1px solid #000; display:inline-block; padding:.8em 1.5em;}*/


.fooInfo{display: flex;align-items: center;width:100%;}
.fooInfo li{display: flex;padding:2em 0;}
.fooInfo li:nth-child(1){flex:1;}
.fooInfo li:nth-child(2){flex-direction: column;align-items: center;}
.fooInfo li h3{ font-size:3rem; color:#7A99E0;  }
.fooInfo li h4{font-size: 1.875rem;}
.fooInfo li h6{ font-size:1.125rem; font-weight:bold; margin:.5em 0; }
.fooInfo li .info{display: flex;flex-wrap: wrap;flex-direction: column;height: 58px;width: 100%;gap: 10px 30px;}
.fooInfo li p{ line-height:150%; }
.fooInfo_tt{ display: inline-block; vertical-align:middle; padding-right:2em; margin-right: 1.6em; border-right: solid 1px #ccc; text-align: left;  }
.fooInfo_add{ display: inline-block; vertical-align:middle;  text-align: left;   }
.txtBeforePlus:before{ content:'+'; display:inline-block; color:#7A99E0; font-weight:normal; padding-right:5px }
@media screen and (min-width:861px) and (max-width:960px){
	.fooInfo li:nth-child(1){ width: 70%; }
	.fooInfo li:nth-child(2){ width: 30%; text-align:right;   }
	}
@media screen and (max-width:860px){
	.fooInfo{ display:block;  }
	.fooInfo li{  display: inline-block; padding:1em;    }	
	.fooInfo li:nth-child(1){ display: inline-block; width: 100%; text-align:center; }
	.fooInfo li:nth-child(2){ display: inline-block; width: 100%; text-align:center; }
	}
	
@media screen and (max-width:700px){
	.fooInfo_tt{  width:100%; padding: 0 0 1em 0; margin:0 auto 1em auto; position:relative; border-right: none; text-align:center;    }
	.fooInfo_tt:after{ width: 4em; content:''; display: block; background: #ccc; height:1px; position:absolute; bottom:0; left:0; right:0; margin:0 auto; }
	.fooInfo_add{ width:100%;  text-align:center;  } 
	.fooInfo li .info{height: unset;}
	}
 
@media (min-width:1221px) {
		.fooInfo li h6 { max-width: 23em; }
		}
		
@media (max-width:1220px) {
		.fooInfo_tt { border: none; padding-bottom: 1em; }
		}	
	
/* ===============  Footer  =============== */
footer{ background:#000; padding:1em 0;}
footer a:hover{ text-decoration: underline; }
footer .left , footer .right {  display:inline-block; vertical-align: middle; font-size:.7rem;  }
footer .left {  color:#CBCBCB; padding:10px 0; }
footer .right{  color:#5D5D5D; padding: 5px 0; }
footer .right a{ display:inline-block; vertical-align: middle; padding: 0 3px; } 
footer .right a img{ max-height:25px; width:auto; }

/*footer .left a{ color:#CBCBCB; padding:0 1em;}
footer .left a:last-child{ border-left:1px solid red;}*/

.aaDivRed { display:inline-block; }
.aaDivRed li{ display:inline-block; }
.aaDivRed li:last-child{  color:#CBCBCB; }
.aaDivRed li a{ padding: 0 1em; }
.aaDivRed li a:hover{ color: #fff; }
.aaDivRed li:not(:last-child) a{ border-right:1px solid red;  }

@media screen and (min-width:861px){
	footer .right{ float: right; }	
	} 
@media screen and (max-width:860px){
	footer .left, footer .right{ width: 100%; text-align: center;   }	
	}
@media screen and (max-width:500px){
	 footer .left span, footer .left ul{ display:block; width: 100%; margin:.5em auto; }
	}


.foo1, .foo2, .foo3{ padding: 1em; font-size: .7rem; line-height: 2em;}
.foo1 { color: #CBCBCB; }
.foo2 a { display: inline-block; vertical-align: middle; padding: 0 3px; }
.foo2 a img {  max-height: 25px;  width: auto; }
.foo3 a{ margin: .5em 1em; display: inline-block; opacity: .8; }
.foo3 a img{ height: 25px; width: auto; vertical-align: middle;}
.foo3 a:hover{ opacity: 1; }

@media (min-width: 1000px){
		.foo2, .foo3{ display: inline-block; vertical-align: middle;  }
}
@media (max-width: 500px){
		.foo1 span{ display: block; }
		.foo3 a img{ height: 20px;   }
		.foo3 a:first-child{ margin-left: 0; }
		.foo3 a:last-child{ margin-right: 0; }
}





	
/* =============== 一盒田 =============== */
.green01 { width:100%; height:100%;background:url(../../assets/img/green01.jpg) no-repeat center center; background-size: cover; position:relative; text-align:center; }
.green01 .title { position: absolute; top:50%; left:0; right:0; margin: auto; width:80%; text-align:center;  }
.green01 .title h1{ color:#FFF; font-family:'RageItalic'; margin-bottom: .5em; }
.green01 .title p { font-size:1.375rem; color:#FFF; line-height:180%; }
.aascrollArrow{ display:block; position:absolute; bottom:2em; left:0; right:0; width: 60%; max-width:240px; margin:0 auto; text-align:center; }
.aascrollArrow i{ display:block; margin:.5em auto; width:32px; height:32px; border:5px solid #FFF; background:#000 url(../img/arrow.png) no-repeat center center; border-radius:50%;  }
.aascrollArrow span{ font-size:.9em; opacity:0;  }
.aascrollArrow:hover{ bottom:1em; }
.aascrollArrow:hover span{  opacity:1; letter-spacing:1px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
.colorFFF{ color: #fff; }

.green02 {width:100%; height:100%; background:url(../../assets/img/green02.jpg) no-repeat center bottom; background-size: cover; position:relative; }
.green02 .word { position:absolute; left:0; right:0; top:30%; width:80%; max-width:1130px; margin:auto; }
.green02 .word h1, .green02 .word h2 { color:#A4B86A; }
.green02 .word h1{ font-size: 3.25rem; line-height:1.6em; }
.green02 .word h2:nth-child(1){ margin-bottom:1rem;}
.green02 .word hr{ width:67px; height:1px; background: rgba(164, 184,106,.8); margin:3em 0;  }
.green02 .word p { color:#FFF; line-height:180%; max-width:480px;}

.green03 { width:100%; height:100%; background:url(../../assets/img/green03.jpg) no-repeat right top; background-size: cover; position:relative; }
.green03 .word { position:absolute; left:0; right:0; top:15%; width:80%; max-width:1130px; margin:auto; text-align:right;   }
.green03 .word h1, .green03 .word h2 { color:#D75E38 }
.green03 .word h1{ font-size: 3.25rem;  line-height:1.6em;  }
.green03 .word h2:nth-child(1){ margin-bottom:1rem;}
.green03 .word hr { width:67px; height:1px; background:#5f6359; margin:3em 0 3em auto; }
.green03 .word p {  line-height:180%; max-width:480px; margin-right: 0; display:inline-block; /*float:right;*/   }
.green03 .word p:after{ content:''; display:block; clear:right; }

.green04 { width:100%; height:100%; background:url(../../assets/img/green04.jpg) no-repeat center center; background-size: cover; position:relative; }
.green04 .word{ position: absolute; top:10%; left: 0; right:0; margin:auto; width:80%; max-width:600px; text-align:center;  }
.green04 .word h1, .green04 .word h2{ color:#00664C;}
.green04 .word h1{ font-size: 3.25rem;  line-height:1.6em;  }
.green04 .word h2:nth-child(1){ margin-bottom:1rem;}
.green04 .word hr{ width:67px; height:1px; background:#5f6359; margin:3em auto; }
.green04 .word p{ color:#333; margin: auto; line-height:180%;}

.green05 { width:100%; min-height:100%; background:url(../../assets/img/green05.jpg) no-repeat center center; background-size: cover; position:relative;}
.green05 .word{ /*position:absolute; left:0; right:0; top:10%;*/ width:90%; max-width:1130px; margin: 0 auto;  padding: 6em 0 8em 0;  }
.green05 .word h1{ font-size: 3.25rem;  line-height:1.6em; color: #6B5FD8; }
.green05 .word h2{ color:#111; font-size: 2rem;   }
.green05 .word hr{ width:67px; height:1px; background: rgba(100, 100, 100, .6); margin:3em auto 3em 0;  }
.green05 .word p { line-height:180%; max-width:600px; }

@media screen and (min-width: 961px){
	.green01, .green02, .green03, .green04, .green05{ background-attachment: fixed;  }
}

@media screen and (max-width:960px){ 
	.green02, .green03, .green04 { height:auto; min-height: 100%; /*padding: 280px 0;*/ }
	.green02 .word { background: rgba(0,0,0,.5); }
	.green03 .word { /*background: rgba(213, 232, 255, 0.2);*/ }
	.green04 .word { background: rgba(255,255,255,0.3); }
	.green02 .word, .green03 .word , .green04 .word{ /*position:relative; margin:2em auto; */ top:0; left:0; height:100%; width:100%; max-width:none; padding:7em 2em 3em 2em; margin:0; }
	.green02 .word p, .green03 .word p, .green04 .word p, .green05 .word p{ font-size:.9em;}
	.green04 .word p br{ display:none; }
	.green02 .word h1, .green03 .word h1, .green04 .word h1, .green05 .word h1{ font-size: 2.3rem !important; line-height:1em; }
	.green02 .word hr, .green03 .word hr, .green04 .word hr, .green05 .word hr{ margin-top:1.3em; margin-bottom:1.5em; }
}

.featurePot{ width: 100%; padding: 0; text-align: justify; /*font-size: 0; font-size: 12px\9;*/ /* IE6-9 only fix */ margin: 3em auto 5em auto;   }
.featurePot:after { content:""; width: 100%; display: inline-block; zoom: 1; *display: inline; }
.featurePot li{ text-align: center; display: inline-block; zoom: 1; *display: inline; vertical-align:top; width:10em; height:10em; overflow: hidden; 
	padding: 1em; background: rgba(255,255,255,0.2); border:solid 1px #000; font-size:1.1rem; line-height:160%; text-align: left; letter-spacing:1px; position: relative; margin-top: 2em;  }
.featurePot li i{  position:absolute; right:1em; bottom:1em; display:block; font-style: normal;  }
.featurePot li:hover{ color: #fff; }
.featurePot li:nth-child(1):hover {  border:solid 1px #FF9000;}
.featurePot li:nth-child(2):hover {  border:solid 1px #75D8CF;}
.featurePot li:nth-child(3):hover {  border:solid 1px #B4C030;}
.featurePot li:nth-child(4):hover {  border:solid 1px #FF4D4D;}
.featurePot li:nth-child(5):hover {  border:solid 1px #6B5FD8;}
.featurePot li:nth-child(1) .mask { background:#FF9000;  }
.featurePot li:nth-child(2) .mask { background:#75D8CF;  }
.featurePot li:nth-child(3) .mask { background:#B4C030;  }
.featurePot li:nth-child(4) .mask { background:#FF4D4D;  }
.featurePot li:nth-child(5) .mask { background:#6B5FD8;  }
.featurePot .mask{ position:absolute; top:-20%; left:0; width:100%; height:100%; padding: 1em; font-size: 1rem; letter-spacing:0; 
	opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition:  all .5s linear; -ms-transition:  all .5s linear; -o-transition:  all .5s linear; 
}
.featurePot li:hover .mask{ top:0; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  }
.featurePot .mask p{ opacity: 0; transform: scale(.5); -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); -ms-transform: scale(.5); color: #fff;
	transition: all .5s; -webkit-transition: all .5s; -moz-transition:  all .5s; -ms-transition:  all .5s; -o-transition:  all .5s; }
.featurePot li:hover .mask p{ opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); }


.featurePot_Phone{  display: none;  width:100%; margin: 3em auto; }
.featurePot_Phone li{ margin-bottom: 1.5em;  }
.featurePot_Phone h6{ line-height: 200%; }
.featurePot_Phone h6 mark{ background: #6B5FD8; margin-right: .5em; color: #fff; padding:.2em .5em;    }
.featurePot_Phone h6 span{ }

@media screen and (max-width:1100px){
	 .featurePot li, .featurePot .mask{ font-size:.9rem; }
	}
@media screen and (max-width:850px){
	 .featurePot { display: none; }
	 .featurePot_Phone { display: block; }
	}


.plant { width:100%; display:table; background: #000;  }
.plant li { width:50%; display:table-cell; min-height:300px; vertical-align:top; padding:3em; }
.plant h4 { font-size:2.2rem;}
.plant p{ max-width: 287px; line-height:180%; text-shadow: 5px 0px 20px rgba(255, 255, 255, 0.2);   }
.plant_L { color:#FFF; background:#8A8A7B url(../img/plant01.png) no-repeat left center; text-align:right; padding-right: 2em; }
.plant_L h4 { margin-bottom:1em;}
.plant_L p { margin-left:auto; margin-right:0; text-shadow: 5px 0px 20px rgba(0, 0, 0, 0.2); }
.plant_R { background:#ECECEC url(../img/plant02.png) no-repeat right center; padding-left: 2em; }
.plant_R h4 { margin-top:1em;}
.plant a{ display:block; padding: 3em; } 
.plant li:hover{ -webkit-filter: brightness(90%); filter: brightness(90%); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
 

@media screen and (min-width:1281px){
	.plant a:hover{ padding-right:1em; padding-left:1em;  }
	}
@media screen and (max-width:1280px){
	.plant a{ padding-right:0; padding-left:0; }
	}
@media screen and (min-width:1001px) and (max-width:1280px){
	.plant_L { /*background-position: -1em center;*/ background-size: auto 75%; }
	.plant_R { /*background-position: 150% center;*/ background-size: auto 70%; }
	}
@media screen and (max-width:1000px){
	.plant{ display: block; }
	.plant li { display: block; width:100%; }
	}
@media screen and (max-width:800px){
	.plant_L {  background-position: -1em center;  }
	.plant_R {  background-position: 130% center;  }
	} 
@media screen and (max-width:600px){
	.plant_L { background-size: 60% auto; background-position: -2em bottom;  }
	.plant_R { background-size: 60% auto; background-position: 120% bottom;   }
	.plant a{ padding:0; }
	} 
@media screen and (max-width:400px){
	.plant li{ padding: 3em 2em 1em 2em ;}
	}	
	
/* =============== 上方形象banner =============== */
.topBanner { width:100%; height:100%; background-size:cover; }
.topBanner .title { position: absolute; top:49%; left:0; right:0; margin: auto; width:80%; text-align:center; }
.topBanner .title h1{ color:#FFF; font-family:'RageItalic'; text-shadow: 2px 0px 12px rgba(0, 0, 0, 0.7); margin-bottom: .2em; }
.topBanner .title p{ font-size:1.4rem; font-weight:bold; color:#FFF; line-height:180%; }
@media screen and (max-width:800px){
	 .topBanner .title p{ font-size:1rem; }
	}



/* =============== 台灣可可 =============== */
.chocoIndexBan { background:url(../../assets/img/choco-banner.jpg) no-repeat center center; background-size:cover; background-attachment:fixed; }
.caoTaiwan { background:#EEE; padding: 3em 0; }
.caoTaiwan .title { padding:4em 0;  text-align:center;}
.caoTaiwan .title h2{ font-size:2.6rem; line-height:1.2em; margin:.5em 0; }
.caoTaiwan .title hr { width:67px; height:1px; background:#8C4600; margin:2em auto 1.5em}

.caTW { margin:2em auto; width:100%;  }
.caTW li { display: table; margin-bottom:1em;  }
.caTW li .caTW_txt, .caTW li .caTW_img{ display:table-cell; width:50%; vertical-align:middle; padding:1em 2em;  }
.caTW li:nth-child(even){ direction:rtl; }
.caTW_txt{ direction: ltr; }
.caTW_txt h4{ font-size:1.4rem; margin-bottom:.5rem; font-family:  'Myriad Pro', 'Helvetica Neue', 'Helvetica', 'Arial', 'MHei', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif; }
.caTW_txt span { color:#666; }
.caTW_txt p{ margin-top:2.5rem; line-height:180%; }
.caTW_img { text-align:center;}
.caTW_img img{ max-width:100%; }

@media screen and (max-width:820px){
	.caTW li .caTW_txt, .caTW li .caTW_img{  padding: 1em;  }
	.caTW_txt p{ font-size:.9em; }
	}
@media screen and (max-width: 700px){
	.caTW li { display: block; }
	.caTW li .caTW_txt, .caTW li .caTW_img{ display: block; width:100%;   }
	.chocoIndexBan { background-attachment:scroll; }
	}

.aboutCao{  width:100%; background: url(../../uploads/bgKnowCacao-1.jpg) no-repeat center center;  /*background:url(../img/aboutCao-banner.jpg) no-repeat center center;*/ background-size:cover;  }
.blkDotBG{ background: url(../../uploads/bgKnowCacao-2.png) repeat 0 0;  }
.aboutCao .title { margin:0 auto; padding:5em 0 3em 0; width:80%; text-align:center;}
.aboutCao .title h2{ font-size:2.6rem; color:#FFF; line-height:1.2em; margin:.5em 0;}
.aboutCao .title hr { width:67px; height:1px; background:#8C4600; margin:2em auto; }
.knowmore { margin: 0 auto; padding:0 0 4em 0; text-align:center; width:100%;  }
.knowmore li{ display:inline-block; width:32%; text-align:center; vertical-align:top;  padding: 0 1em;}
.knowmore li p{ font-size:1.25rem; color:#FFF; margin:2em auto 1em auto; line-height:150%; }
.knowmore li p:before{ content:'+'; color:#8C4600; display:inline-block; padding-right:.2em; }
.knowmoreIMG{ width: 90%; max-width: 220px; margin: 0 auto; }
.knowmoreIMG img { border-radius:50%; }
.arrow { display:inline-block; width:40px; height:40px; background:#8C4600 url(../img/arrow.png) center center no-repeat; border-radius:50%; margin:0 auto; opacity:0; }
.knowmore a {  display:block;  }
.knowmore a:hover { opacity:0.8; }
.knowmore a:hover .arrow{ opacity:1;  }

.aboutCao-In{ background:#EEE; padding: 1em 0 3em 0;}
.aboutCao_container {  max-width:780px; width: 90%; position:relative; margin:1em auto 4em auto; }
.x { display:block; width:42px; height:42px; background:url(../img/X.png) no-repeat; position:absolute; left:0; right:0; margin:auto; }
.aboutCao-In h3 { text-align:center; margin:2em auto; }
.aboutCao-In h5 { color:#8C4600; border:1px solid #8C4600; display:inline-block; padding:.4em 1em; font-size:1em; margin:2em 0 .5em 0; line-height: 120%; }
.aboutCao-In p {line-height:160%; margin: 1em 0 2em 0;}
.aboutCao-In fieldset { color:#000; border:1px solid #000; padding:4em 3em 1em 3em; }
.aboutCao-In legend{ padding:0 .5em; font-size:1.5em; }
.aboutCao-In fieldset h6 { font-weight:bold; margin-bottom:1.6rem;}

.chocoMade{ background:#BB9B83; padding: 2em 0 5em 0;}
.chocoMade .title { text-align:center; width:80%; margin: 4em auto;}
.chocoMade .title h2{ font-size:2.6rem; line-height:1.2em; margin:.5em 0; }
.chocoMade .title hr { width:67px; height:1px; background:#8C4600; margin:2em auto 1.5em;}
.chocoMade .title p{ text-align:center; max-width:500px; margin:0 auto; line-height:150%}

@media screen and (min-width:501px) and (max-width:680px){
	.knowmore li{ padding: 0 .3em; }
	.knowmore li p{ font-size:.9em;}
	}
@media screen and (max-width:500px){
	 .knowmore li{ width:100%; margin-bottom: 1em; padding:0;  }
	 .knowmoreIMG{ width: 30%; display:inline-block; vertical-align: middle; margin-right:5%;  }
	 .knowmore li p{ width: 50%; display: inline-block; vertical-align: middle; font-size: 1em; text-align:left;  }
	 .arrow{ vertical-align: middle; width:1.5em; height:1.5em;   }
	 .aboutCao-In fieldset { padding:3em 1em 1em 1em; }
	}

/* ============= dropdown ==================== */  
.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after,
.dropdown .carat,
.dropdown .carat:after,
.dropdown .selected::after,
.dropdown:after{
	-webkit-transition: all 150ms ease-in-out;	-moz-transition: all 150ms ease-in-out;	-ms-transition: all 150ms ease-in-out;transition: all 150ms ease-in-out;
}
.dropdown .selected::after,
.dropdown.scrollable div::after{
	-webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none;
}

/* WRAPPER */
.dropdown{ position: relative; width: 100%; cursor: pointer; /*background: #f5f5f5; url(../img/arrow-black.png)*/ background: url(../img/arrow-down-bk.svg) no-repeat right center; background-size: 20px auto; color: #000; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
.dropdown.open{ z-index: 2; }
.dropdown:hover{ }
.dropdown:after{ content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent; }

/* CARAT    
.dropdown .carat, .dropdown .carat:after{ content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; border: 6px solid transparent; border-top: 6px solid #666 ; -webkit-transform-origin: 50% 20%; -moz-transform-origin: 50% 20%; -ms-transform-origin: 50% 20%; transform-origin: 50% 20%;}
.dropdown .carat:after{ margin-top: -8px; right: -6px; border-top-color: #f0f0f0; }
.dropdown:hover .carat:after{ border-top-color:  #f5f5f5;}
.dropdown.focus .carat{ border-top-color: #666; }
.dropdown.focus .carat:after{ border-top-color: #f5f5f5; }
.dropdown.open .carat{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } */ 

/* OLD SELECT (HIDDEN) */
.dropdown .old{ position: absolute;left: 0;top: 0;height: 0;width: 0; overflow: hidden;}
.dropdown select{position: absolute; left: 0px;top: 0px;}
.dropdown.touch .old{width: 100%;height: 100%;}
.dropdown.touch select{width: 100%; height: 100%;opacity: 0;}

/* SELECTED FEEDBACK ITEM */ 
.dropdown .selected {  color: #666; } 
.dropdown li{  color: #fff; } 
.dropdown .selected, .dropdown li{
	display: block; line-height: 100%;  font-size: inherit; padding: .75em; overflow: hidden; white-space: nowrap; width:100%; text-transform: inherit; letter-spacing:1px; } 
.dropdown .selected::after{
	content: ''; position: absolute;right: 0;top: 0;bottom: 0; width: 60px; border-radius: 0 2px 2px 0;   }
/* DROP DOWN WRAPPER */
.dropdown div{ position: absolute; height: 0; left: 0;right: 0; top: 100%; margin-top: -1px; background: #333; overflow: hidden; opacity: 0;}
/* Height is adjusted by JS on open */
.dropdown.open div{ opacity: 1; z-index: 2;}
/* FADE OVERLAY FOR SCROLLING LISTS */
.dropdown.scrollable div::after{ content: ''; position: absolute; left: 0; right: 0;bottom: 0; height: 50px; box-shadow: inset 0 -50px 30px -35px #f8f8f8;}
.dropdown.scrollable:hover div::after{ box-shadow: inset 0 -50px 30px -35px #f4f4f4; }
.dropdown.scrollable.bottom div::after{ opacity: 0;}
/* DROP DOWN LIST */
.dropdown ul{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden; }
.dropdown.scrollable.open ul{ overflow-y: auto;}
/* DROP DOWN LIST ITEMS */
.dropdown li{ list-style: none; padding: .75em;}
/* .focus class is also added on hover */
.dropdown li.focus{ background: rgba(255,255,255,.1); position: relative; z-index: 3; }
.dropdown li.active{ background: rgba(255,255,255,.3) ; color: #fff; }

/*  聯絡頁 ＆ header 語言  */  
#contactForm .dropdown{ display:inline-block; vertical-align:middle; }
.menuR_lang .dropdown{ background: url(../img/arrow-menu.png) no-repeat 96% center; color:#fff !important; }
.menuR_lang .dropdown .selected {  color: #fff; } 
.newsSelect .dropdown{ }



/* =============== 下拉選單 款式2 =============== */
.custom-select { position: relative; display: block; padding: 0;  }

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
		width: 100%;  margin: 0;  background: transparent;
		border: none; outline: none;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;
		-webkit-appearance: none; -moz-appearance: none; appearance: none;
		/* Font size must the 16px or larger to prevent iOS page zoom on focus */
		font-size: 1em; padding: .7em .7em .7em 0;  line-height: 1.3;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
.custom-select::after {
		content: "";  position: absolute; width: 20px;  height: 20px;  top: 50%; right: 0; margin-top: -10px; 
		background: url(../img/arrow-down-bk.svg) no-repeat 0 0; background-size: 100% auto; 
		z-index: 2;
		/* This hack make the select behind the arrow clickable in some browsers */
		pointer-events: none;
}
/* Hover style */
.custom-select:hover {}
.custom-select select:focus { outline: none;}
.custom-select option { font-weight: normal; }

/* ------------------------------------  */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ----------------------------------  */
/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus, .custom-select::after { display: none; }
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		.custom-select select::-ms-expand { display: none; }
		.custom-select select:focus::-ms-value { background: transparent; color: #222; }
}
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow
@-moz-document url-prefix() {
		.custom-select { overflow: hidden;  }
		.custom-select select {
				width: 120%; width: -moz-calc(100% + 3em);  width: calc(100% + em);
		}
}
*/
/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {
		color: transparent; text-shadow: 0 0 0 #000;
}



/* =============== 表格樣式 =============== */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
input[type="text"] , textarea { border:0; background:transparent;  width:100%;   }
input[type="text"]:focus , textarea { outline:none;  }
label, input, textarea { line-height: 120%; }


/* =============== 聯絡我們 =============== */
.contact { padding:3em 0 8em 0; position:relative; background: url(../img/bgContact.jpg) no-repeat top center; background-size: cover; }
/*.contact .x{ top:4.6em; }*/
.contact_tt{ text-align:center; }
.contact_tt h3 { font-size:2.5rem; }
.contact_tt hr { width:67px; height:1px; background:#000; margin:2em auto;}
.contact_tt p { line-height:180%; /*margin-bottom:.5em auto;*/ }
@media only screen and (max-width: 640px) {
	.contact_tt{ font-size: .9em; }
	}

.wrongMSG{ color: #c0392b; text-align:center; line-height:150%; }

.contactForm_BG{ background:rgba(255,255,255, 0.9); width: 80%; max-width:980px; padding:5em; margin:5em auto 0 auto; }
#contactForm { width:100%; margin:2em auto; }
#contactForm > li { display:inline-block; vertical-align:top; width:47%; height: 76px; border:1px solid #000; padding:0; margin-bottom:30px; position: relative; padding:1em 1em 1em 7em;}
#contactForm > li:hover{ border:1px solid rgba(0,0,0,.3); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

#contactForm li label { border-right:1px solid #000; width:5em; margin-right:1em; display:inline-block; position:absolute; top: 1.7em; left:1em;  }
#contactForm input{  width: 100%; height:40px; display:inline-block; }
#contactForm textarea { padding:.8em;  width:100%;  display: inline-block; line-height: 150%; }

#contactForm li.w100{ width: 100%; float:none; display:block; height:auto; margin-left:0 !important; margin-right:0 !important;  }
/*.bk_write { width: 100%;  position:relative;  }
.bk_write .dropdown{ display:inline-block; vertical-align:middle; height: 40px;  }*/
.bk_sand{ background: red;}

 @media only screen and (min-width: 961px) {
	#contactForm > li:nth-child(even) { margin-left: 5%; }
 }

/*驗證碼*/
.certi{ width: 100%;  display:inline-block;  position:relative;  }
.certi img{ position: absolute; left:0; top:0;  }
.certi input { padding-left:5em;  } 

/*送出*/
.send { background: #000; color:#fff; text-align:center; position:relative;   }
.reset { background: #333; color:#828282; text-align:center; position:relative;  }
.send a, .reset a{ position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; font-size:1.3rem; padding-top:1.2em; letter-spacing:1px;  }
.send a:hover, .reset a:hover{ letter-spacing:3px; background: #000; color: inherit; }
.sameH{ height: 4.5em; }

@media only screen and (max-width: 960px) {
	.contact { padding:1em 0 0 0; }
	.contactForm_BG{ width:100%; padding: 2em 0 1em 0; }  
	#contactForm { width:90%;  } 
	#contactForm > li:nth-child(even) { float: none; }
	#contactForm > li { width: 100%;  display:block; }	 
	}
@media only screen and (max-width: 780px) {
	.write100{ width: 69%;  }
	}
@media only screen and (max-width: 500px) {
	.contact .xCLOSE{  margin:0 auto; transform: scale(.6); -moz-transform: scale(.6); -ms-transform: scale(.6); -webkit-transform: scale(.6); -o-transform: scale(.6); }
	}


/* =============== 隱私權 =============== */
.policy { padding:5em 0; position:relative; background: url(../img/bgContact.jpg) no-repeat top center; background-size: cover; }
.policy_tt{ text-align:center; }
.policy_tt h3 { font-size:2.5rem; }
.policy_tt hr { width:67px; height:1px; background:#000; margin:2em auto;}
.policy_tt p { line-height:180%; margin-bottom:.5em auto; }

.policyForm_BG{ background: rgba(255,255,255,.8); width: 80%; max-width:980px; padding:4em 3em; margin:5em auto 0 auto; line-height:160%;  }
.policyForm_BG p{ margin:1em 0; font-size:.9em; }
@media only screen and (max-width: 960px) {
	.policy { padding:1em 0 3em 0; }
	.policyForm_BG{ width: 96%;  } 
	}
@media only screen and (max-width: 500px) {
	.policyForm_BG{ padding:2em;  } 
}

/* =============== 體驗活動 DIY =============== */
.diyIndexBan { background:url(../img/diy-banner_240813.jpg) no-repeat center bottom; background-size:cover; background-attachment:fixed;  }
.diyExperience { background:#EEE; padding-bottom:8em; }
.diyExperience .title { padding:6em 0 3em 0; text-align:center;  }
.diyExperience .title h2{ font-size:2.6rem;  line-height: 160%; }
.diyExperience .title hr { width:67px; height:1px; background:#9daa10; margin:2em auto 1.8em auto;  }
.diyExperience .title p { line-height:180%; }
 @media (max-width:600px){
	.diyExperience .title p br{ display:none; }
	 }

.diyExperience-Box { margin: 3em auto; }
.diyExperience-Box li { margin-bottom:3em; box-shadow: 0 0 15px #CCC; width:100%; position:relative; background:#FFF; display:table; }
.diyExperience-Box li a{ display: block; padding:3em;   }
.diyExperience-Box a:hover p{ text-decoration: underline;   }
.diy_txt{ display: table-cell; width:50%; vertical-align: middle; overflow:hidden; position:relative; direction:ltr; }
.diy_img{ display: table-cell; width:50%; vertical-align: middle; overflow:hidden; background:#fff;   } 
.diy_img img{ vertical-align:top; width:100%;  }

.diy_txt h4{ font-size:1.8rem; font-weight:bold; line-height:1.2em; margin-bottom:3em; color:#A5B225;  }
.diy_txt h4:before{ content:'+'; color:#FF8D00; float:right; font-size:2rem; font-weight:normal; }
.diy_txt h4 small{ display:block; font-weight:normal; font-size:60%; }
.diy_txt p{ color: #656565;  line-height:150%; /*position: absolute; bottom:0; */  }
.diyExperience-Box:after, .diyExperience-Box > li:after
{ display:block; content:''; clear:both;  }

.diyExperience-Box li:nth-child(even){ direction:rtl; }

.diy_txt:hover h4:before{ -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.diy_img:hover img{  opacity:.9; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;  }

.diy_txt:hover h4, .diy_txt:hover p  { color:#fff;  }
.diyExperience-Box li .diy_txt {  transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
.diyExperience-Box li:nth-child(5n+1) .diy_txt:hover { background: #B4C030 ; }
.diyExperience-Box li:nth-child(5n+2) .diy_txt:hover { background: #FDD04A ; color: #fff; }
.diyExperience-Box li:nth-child(5n+3) .diy_txt:hover { background: #6B5FD8 ; color: #fff; }
.diyExperience-Box li:nth-child(5n+4) .diy_txt:hover { background: #75D8CF ; color: #fff; }
.diyExperience-Box li:nth-child(5n+5) .diy_txt:hover { background: #994C80 ; color: #fff; }


@media only screen and (min-width: 851px) and (max-width: 1020px) {
	.diy_img img{  transform: scale(1.36); -moz-transform: scale(1.36); -ms-transform: scale(1.36); -webkit-transform: scale(1.36); -o-transform: scale(1.36); }
	}
@media only screen and (min-width: 641px) and (max-width: 850px) {
	.diy_img img{  transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -webkit-transform: scale(1.8); -o-transform: scale(1.8);  }
	.diy_txt h4{ margin-bottom: 2em;}
	.diy_txt p{ font-size: .9em;  }
	.diyExperience-Box li a{ padding-left: 2em; padding-right: 2em; } 
	}
@media only screen and (max-width: 640px) {
	 .diyExperience-Box li, .diy_txt, .diy_img { display:block; width:100%; }
	 .diy_txt h4{ font-size: 1.5rem; margin-bottom: 1em; }
	 .diy_txt p{ font-size: .9rem; }
	}
@media only screen and (max-width: 500px) {
	.diyExperience-Box li a {  padding: 1.5em; }
	}


.diyBanner { width:100%; height:auto; position:relative; text-align:center; overflow:hidden; }
.diyBanner h2 { font-size:3rem; color:#FFF; position:absolute; /*left:40%;*/ top: 53%; width: 100%; padding:0 1em; line-height:120%;   }
/*.diyBanner div {width:100%; height:100; background:url(../img/diyDetail-banner.jpg) no-repeat center center; position:absolute; background-size:cover;}*/
@media only screen and (min-width: 901px) {  
	.diyBanner img { width:100%; }
}
@media only screen and (max-width: 900px) { 
	 .diyBanner{ height:320px; background: #000;  }
	 .diyBanner img { height:100%; opacity: .8; max-width: none; }
	 /*.diyBanner h2{ font-size:2rem;  }*/
	 .diyIndexBan { background-attachment: scroll; }
	}

@media only screen and (max-width: 640px) { 
	 .diyBanner{ height: 260px; background: #000;  }
	}


.diyInfo { padding-top:9em; }
/*.diyInfo .container > div{  display:inline-block; margin-right:-4px;}*/
.diyInfo .title{ width:68%; display:inline-block;   }
.diyInfo .title h3 { font-size:3rem; line-height:150%; margin-bottom: .5em; }
.diyInfo .title p { line-height:150%; }
.diyInfo .right { width:30%; text-align:right;  display:inline-block;  } 
.aaArrowCircle {  color:#BFBFBF; margin-right:1.5em; display:inline-block; vertical-align:middle;   }
.aaArrowCircle:before{ width:26px; height:26px; content:''; background:#bbb url(../img/arrow-L.png) no-repeat center center; border-radius:50%; margin-right: .5em; display:inline-block; vertical-align:middle;  }
.aaArrowCircle:hover{ color:#333; }
.aaArrowCircle:hover:before{ background-color:#555;  }

@media only screen and (max-width: 800px) {
	.diyInfo .title h3 { font-size:2.2rem;   }
	.diyInfo { padding-top: 3em; }
	.diyInfo .title, .diyInfo .right { display:block; margin-top:1.5em; width:100%; text-align:left;  padding:0 2em;  }
	}

.diyInfo-box { margin:3em auto; position:relative;}
.diyInfo-box > li { overflow:hidden; width:100%; position:relative; background:#FFF; display:table;   }
.diyInfo-box .img, .diyInfo-box .txt{  display:table-cell; width:50%; overflow:hidden; position:relative; vertical-align: top; }
.diyInfo-box .txt { padding: 5em 3em 1em 3em;  direction: ltr;    }
.diyInfo-box .img img{  vertical-align:top;  width:100%;  }
.diyInfo-box > li:nth-child(even) { direction: rtl; }

.priceInfo { margin-bottom:4em;  }
.priceInfo > li{ color:#000; display:inline-block; margin-right:2em;  }
.priceInfo > li:last-child { margin-right:0; }
.priceInfo > li > div:nth-child(1){ font-size:3.75rem; line-height:130%; }
/*.priceInfo > li > div:nth-child(2) { margin-left:.5em; }*/ 
.diyInfo-box .txt h4{ font-size:1.8rem; font-weight:bold; line-height:1.2em; margin-bottom:2em;}
.diyInfo-box .txt p{ line-height:180%;}

.tickList { color:#000; /*margin-top:3em; position:absolute; bottom:.5em;*/  }
.tickList li{ line-height: 180%;  }
.tickList li:before { font-weight:bold; display:inline-block; content:'－'; color:#7AE0D5; margin-right:.5em}

.diyInfo-box .container:after, .diyExperience-Box:after 
{ display:block; content:''; clear:both;} 

/*.diyInfo-box > li:nth-child(even) .img{ float: right; } 
.diyInfo-box > li:nth-child(even) .img:after{ clear: right; } */


@media only screen and (max-width: 1140px) {
	.priceInfo > li{   margin-right: 1em;  }
	.priceInfo li div:nth-child(1){ font-size:2.4rem;}	
	}
@media only screen and (min-width: 701px) and (max-width: 1140px) {
	.diyInfo-box .txt{ padding: 3em 2em;  }
	.diyInfo-box > li { min-height:360px;  }
		.diyInfo-box .txt br{ display: none;  }
	}
@media only screen and (min-width: 921px) and (max-width: 1140px) {
	 .diyInfo-box .img img{ transform: scale(1.33); -webkit-transform: scale(1.33); -moz-transform: scale(1.33); -ms-transform: scale(1.33); -o-transform: scale(1.33); transform-origin: top center; -webkit-transform-origin: top center; }
	}	
@media only screen and (min-width: 761px) and (max-width: 920px) {
	 .diyInfo-box .img img{ transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform-origin: top center; -webkit-transform-origin: top center; }
	}	
@media only screen and (min-width: 721px) and (max-width: 760px) {
	 .diyInfo-box .img img{ transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -ms-transform: scale(1.9); -o-transform: scale(1.9); transform-origin: top center; -webkit-transform-origin: top center; }
	}	
@media only screen and (max-width: 720px) {
	.diyInfo-box > li{ display:block; margin-bottom:1em; }
	.diyInfo-box .img, .diyInfo-box .txt { display:block; width:100%;}
	.diyInfo-box .txt {position:relative; padding:3em 2em; }
	.diyInfo-box > li:nth-child(even) .img {float:none;}
	.tickList{ position:relative; }
	}
@media only screen and (max-width: 500px) {
	 .priceInfo li div:nth-child(1){ font-size:2em;}	
	}	

.bestMomory { width:100%; background:#EEE; padding-top:7em; padding-bottom: 2em;}
.bestMomory .title h3 { font-size:3rem; margin-bottom:2rem; }
.bestMomory .title p { margin-bottom:2em;}
/*@media only screen and (max-width: 640px) {
	.bestMomory { display:none; }
	}*/

.diyBooking { padding-top: 5em; padding-bottom: 2em; border-top: solid 10px #EEEEEE}
.diyBooking .title h3 { font-size:3rem; line-height:2em;   }
.diyBooking .title p { margin-bottom:3em;}
.diyBooking .wrongMSG{ text-align: left; padding-top: 3em; }

.bookingInfo { border-top:5px solid #DDD; background:red; }
.bookingInfo > li { padding-top:3.9rem; padding-bottom:6rem; border-bottom:1px solid #DDD;}
.bookingInfo > li:nth-child(2) { padding-bottom:10rem;}
.bookingInfo > li:last-child { border-bottom:0; }
.bookingInfo li .listTitle, .bookingInfo li .listContent, .bookingInfo li .bookingTime,.bookingInfo li .bookingForm{ display:inline-block; margin-right:-4px; vertical-align:top;}
.bookingInfo li .listTitle { width:30%; }
.bookingInfo li .listTitle h4 { font-size:1.5rem; margin-bottom:2em;  line-height:160%;}

.bookingInfo li .listContent, .bookingInfo li .bookingTime,.bookingInfo li .bookingForm { width:70%; }
.bookingInfo li .listContent li { margin-bottom:1.25rem; }
.bookingInfo li .listContent span:nth-child(1):after { display:inline-block; content:'/'; color:#CACACA; margin:0 1.8rem 0 1.6rem;}

.bookInfo1{ border-top:5px solid #DDD; margin-bottom: 1em; padding:3em 0 1em 0;  line-height:160%;}
.bookInfo2{ border-top: 1px solid #DDD; margin-bottom: 1em; padding:3em 0 1em 0;  line-height:160%;}
.bookInfo_tt{ width:30%; display:inline-block; vertical-align:top; margin-bottom: 2em; padding-right: 2em;  }
.bookInfo_content{ width:69%; display:inline-block; vertical-align:top;  padding:0 0 1em 0; }
.bookInfo_tt h4{ line-height: 140%; }
@media only screen and (max-width: 800px) {
	.bookInfo_tt, .bookInfo_content{ width:100%; } 
	}

.pointList{ width:100%;  }
.pointList li { margin-bottom:1.2em; }
.pointList span:nth-child(1):after { display:inline-block; content:'/'; color:#CACACA; margin:0 1.5em;}
@media only screen and (max-width: 560px) {
	.pointList span:nth-child(1){ color: #929292; } 
	.pointList span:nth-child(1):after {  margin:0 .5em;}
	}
	
.pointTB td{ padding: .5em 0; vertical-align: top;  }
.pointTB td:nth-child(1){ width: 5em; }
.pointTB td:nth-child(2){ width: 3em; }
td.pointDiv{ color:#CACACA; /*padding:.5em 1em;*/ text-align:center; }



.bookingTime { border-top:2px solid #000; border-bottom:2px solid #000; position:relative;}
.bookingTime > li { border-bottom:1px solid #DDD; padding:2em 0;}
.bookingTime > li:last-child { margin-bottom:1.8rem;}
.bookingTime li .bookingTime-title, .bookingTime li .bookingTime-list { display:inline-block; margin-right:-4px; vertical-align:top;}
.bookingTime li .bookingTime-title { width:30%;}
.bookingTime li .bookingTime-list { width:70%;}
.bookingTime > li:nth-child(even) { background:#EEE;}

.bookingTips{ padding:1.5em 1em 1.5em 3.2em; position: relative; border-bottom:2px solid #000;  }
.bookingTips p:nth-child(1){ margin-bottom:.8rem;}
.bookingTips:before {position:absolute; content:''; width:20px; height:20px; border-radius:50%; background:#CCC url(../img/i.png) no-repeat center center; left:1em;}
 
.scrollArrowB { display:inline-block; width: 100%; text-align:center; /*position:absolute; bottom:-8em; left:0; right:0; z-index:999; */ margin:0 auto;  padding: 2em 0; }
.scrollArrowB p { font-size:.8em; color:#000; }
.scrollArrowB i{ width:24px; height:24px; display:block; margin: .5em auto ; border-radius:50%; background:#000 url(../img/arrow.png) no-repeat center center;}

@media only screen and (max-width: 800px) {
	.bookingInfo li .listTitle, .bookingInfo li .listContent, .bookingInfo li .bookingTime,.bookingInfo li .bookingForm {display:block;}
	.bookingInfo li .listTitle {width:100%;}
	.bookingInfo li .listContent, .bookingInfo li .bookingTime,.bookingInfo li .bookingForm { width:100%; }
	}
	
@media only screen and (max-width: 600px) {
	.listContent { line-height: 150% }	
	.bookingTime li .bookingTime-title, .bookingTime li .bookingTime-list { display:block}
	.bookingTime li .bookingTime-title { width:100%; font-weight:bold; margin-bottom:2em;}
	.bookingTime li .bookingTime-list { width:100%;}
	.bookingTips{ font-size:.9em;}
	}

.bookingTime-list li > div, .bookingTime-list li > ul { display:inline-block; vertical-align:top; margin-right:-4px;}
.bookingTime-list li > div { width:30%; }
.bookingTime-list li > ul { width:70%; }
.bookingTime-list li > ul > li{ margin-bottom:3rem;}
.bookingTime-list li > ul > li span, .bookingTime-list li > ul > li a{ display:inline-block; vertical-align:top; margin-right:-4px;}
.bookingTime-list li > ul > li a { color:#666; float:right; padding:.6rem 1rem; border-radius:3px; margin-top: -0.5em; }





.bkTime { border-top:2px solid #000;  position:relative;}
.bkTime > li { padding:2em 1em ; line-height: 2.5em; border-bottom: 1px solid #DDD;  }
.bkTime > li:nth-child(even) { background:#EEE; }
/*.bkTime > li:last-child { border-bottom: none; }*/
.bkTime_TIT, .bkTime_LIST{ float:left; }
.bkTime_TIT { width:30%;}
.bkTime_LIST{ width: 70%; }
@media screen and (max-width:560px){
	.bkTime_TIT ,  .bkTime_LIST{ width: 100%; }
	.bkTime_TIT{ padding-bottom:1em;}
	.bkTime_TIT br{ display:none;  }
}

.bkTime_1, .bkTime_2 { float:left;  }
.bkTime_1{ width: 30%; }
.bkTime_2{ width: 70%; } 
.bkTime_aEvent{ margin-bottom: 1em; }
.bkTime_aEvent:after, .bkTime_aEvent a:after{ clear:both;}
a.goBooking{ color:#666; float:right; padding:0 1em; border-radius:3px;  display: inline-block;  } 
.bkTime:after, .bkTime > li:after, .bkTime_LIST:after, .bkTime_LIST li:after{ clear:both; content:''; display:table; }

.amLine{ border:1px solid #FFC003; }
.pmLine{ border:1px solid #7BDFD5; }
.amLine:hover{ background: #FFC003; }
.pmLine:hover{ background: #7BDFD5; }
@media only screen and (max-width: 600px) {
	.ampm{ display:none;}
	}
@media only screen and (max-width: 410px) {
	.bkTime_1{ display:none; }
	.bkTime_2{ width: 100%; } 
	a.goBooking span{ display:none; }    
	}





.bookingForm { }
.bookingForm > li { display:inline-block; /*margin-right:-4px; */ vertical-align:top; width:47%;  margin-bottom: 30px; height: 76px; border:1px solid #000; padding:0; position: relative; padding:1em 1em 1em 7em;}
.bookingForm > li:hover{ border:1px solid rgba(0,0,0,.3); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.bookingForm li label { border-right:1px solid #000; width:5em; margin-right:1em; display:inline-block; position:absolute; top: 1.7em; left:1em;  }
.bookingForm input{  width: 100%; height:40px;    }
.bk_write { width: 100%;  position:relative;  }
.bk_write .dropdown{ display:inline-block; vertical-align:middle; height: 40px;  }
.bk_sand{ }

@media only screen and (min-width: 901px) {
	.bookingForm > li:nth-child(odd) { margin-right: 2%; }
	.bookingForm > li:nth-child(even) { margin-left: 2%; }
 }
@media only screen and (max-width: 900px) {
	.bookingForm { width:100%; padding: 2em 0;  }
	.bookingForm > li { width: 100%;  display:block;   }
	.bookingForm > li:nth-child(even) { float: none; }
 }
@media only screen and (max-width: 500px) {
	.bookingForm li label {  width:4.5em; margin-right: .5em;   }
}

.bookNow{ width:100%; max-width:1130px;  background: url(../img/bgBookNow.jpg) no-repeat right bottom; min-height:400px; margin:4em auto 0 auto; padding:1em 3em 1em 4em;  }
.bookNow h3 { font-size:3.125rem; color:#79DFD4; margin-bottom:1em; font-weight:500; }  
.bookNow p {  margin-bottom:3em; line-height:180%; letter-spacing:1px;  }
.bookNow a {  display:inline-block; border:1px solid #000; padding:.6em 1em; color: #000; }
.bookNow a:hover{ background: #000; color: #fff; } 
@media only screen and (min-width: 401px) and (max-width: 900px) {
	.bookNow{ background-size: auto 70%;  }
 }
@media only screen and (max-width: 700px) {
	.bookNow{ padding:0 2em 10em 2em;   }
 }
@media only screen and (max-width: 400px) {
	.bookNow{ background-size: 80% auto; }
 }


/* ===============  =============== */
.ticketIndex { margin-bottom: 5em}
.ticketIndex .word { text-align:center; padding-top: 6em; }
.ticketIndex .word h3{ font-size:3.3rem; line-height:1.1em;}
.ticketIndex .word h3 small { color:#79DFD2 }
.ticketIndex .word hr { width:67px; height:1px; background:#999; margin:2em auto}
.ticketIndex .word p { line-height:180%; letter-spacing:1px; }
.ticketIndex .title > h4{ font-size:3rem; margin-bottom:.5em; margin-top:2em;}

.ticketInfo { margin-top:4em;}
.ticketInfo > li{ border-top:5px solid #DDD;  padding-top:4em; padding-bottom:8em; }
.ticketInfo > li .ticketTitle, .ticketInfo > li .priceTable, .ticketInfo > li .openingTime, .map { display:inline-block; vertical-align:top; margin-right:-4px;}
.ticketInfo > li .ticketTitle { width:30%;}
.ticketInfo > li .ticketTitle h5{ font-size:1.5rem; line-height:130%;}
.ticketInfo > li .priceTable { width:70%;}

.tableRWD { width:100%; max-width:100%; line-height: 1.3em; }
.tb_style1 th { padding: 0 1em 2.3em 1em; }
.tb_style1 td { padding: 2.3em 1em; }
.tb_style1 th{color: #000; border-bottom:solid 1px #000; font-weight: normal;    }
.tb_style1 td { border-bottom:1px solid #CCC; vertical-align:top; border-right:solid 5px #fff;  }
.tb_style1 td > ul > li{ margin-bottom:.8em; }

.openingTime{}
.openingTime p{ line-height:180%;}
.openingTime ul{ margin-top:3.3em;}
.openingTime ul li{ margin-bottom:1em; padding-left: 1.3em; position: relative;;  }
.openingTime ul li:before { display:inline-block; content:'-'; color:#7AE0D5; font-weight: 800; /*margin-right:.8em;*/ position: absolute; left: 0; top:0;  }

.map{ width:70%; }
.map iframe { margin-bottom:1em;}
 
@media only screen and (max-width: 800px) {
	.ticketInfo > li{ padding-top: 2em; padding-bottom:4em; }
	.ticketInfo > li .ticketTitle { padding-bottom:2em;}
	.ticketIndex .title > p{ line-height:180%;}
	.ticketInfo > li .ticketTitle, .ticketInfo > li .priceTable, .ticketInfo > li .openingTime { display:block; width:100%;}
	.tableRWD table, .tableRWD thead, .tableRWD tbody, 
	.tableRWD th, .tableRWD td, .tableRWD tr{
		 display: block;
		}
	.tableRWD thead tr{ position: absolute; top: -9999px; left: -9999px; }
	.tableRWD tr { }
	.tableRWD td {   /* Behave  like a "row" */
		position: relative; padding-left: 7em; white-space: normal; text-align:left;
	}
	.tableRWD td:before{ 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		left: 0; padding:  0;
		width: 6em; white-space: nowrap; text-align:left; color:#666;	 
	}
	
	/* Label the data*/
	.tableRWD td:before{ content: attr(data-title); }
	
	/* rwd table style*/
	.tb_style1 tr{ padding:.5em .8em;  margin-bottom: 1em; /*border:solid 5px #ddd;*/  background: #eee; border-radius: 3px;   }
	.openingTime ul li { line-height:180%;}
	.tb_style1 td { padding-top: .8em; padding-bottom: .8em; border-right:none;  }
	.tb_style1 tr td:last-child{ border-bottom:none; }
	}
	
	
	
	

/*.trafficInfo li { padding:3.6em 0 3.75em; border-bottom:1px solid #DDD;}
.trafficInfo li:last-child { border-bottom: none;}
.trafficInfo span {display:inline-block; vertical-align:top; margin-right:-4px;}
.trafficInfo span:nth-child(1) { width:30%; text-indent:3.5em; vertical-align:middle}
.trafficInfo span:nth-child(2) { width:70%;}
.trafficInfo span:nth-child(2) h6 { margin-bottom:1.6em;}
.trafficInfo span:nth-child(2) p { line-height:180%;}
.car{ background:url(../img/cart.png) no-repeat left top; height:25px; width:auto;}
.thsr {background:url(../img/thsr.png) no-repeat left center; height:33px; width:auto;}
.train{ background:url(../img/train.png) no-repeat left center; height:36px; width:auto;}
.bus { background:url(../img/bus.png) no-repeat left center; height:33px; width:auto;}
*/

 
.trafficInfo{ border-top:5px solid #DDD;  margin: 3em 0 5em 0; width:100%;  }
.trafficInfo li{ padding: 2.2em 0; border-bottom:1px solid #DDD;  }
.trafficInfo li:last-child { border-bottom: none;}
.trafficInfo_1, .trafficInfo_2{ display: inline-block; vertical-align: top; }
.trafficInfo_1{ width:30%; padding-bottom: 1em; padding-left: .5em;   }
.trafficInfo_2{ width:69%; }
.trafficInfo_1 img{ margin-right: 1em;  vertical-align:middle; }
.trafficInfo h6{ margin-bottom:1em; }
.trafficInfo_1 h5{ font-size:1.5rem; line-height: 130%; padding-bottom: 1em;  }
.address{ margin: 1em 0;}

.farmMap{ margin:3em auto 5em auto; }
.farmMap:after{ content:''; clear:both; display:block; }

@media screen and (max-width:550px){
	.ticketIndex .word h3{ font-size: 2.5em; } 
	.ticketIndex .word{ padding-top: 4em; }
	.trafficInfo_1{ width:100%; }
	.trafficInfo_2{ width:100%; }
	}
@media screen and (max-width:440px){
	.buttonSide a, .newsClassBtn a{ margin-left:0;  }
	}
@media screen and (max-width:390px){
	.buttonSide a, .newsClassBtn a{ padding-right: .5em; padding-left: .5em;  }
	}
@media screen and (max-height:600px){
	.ticketIndex .word hr{ margin: 1.5em auto; }
	.buttonSide{ margin-top: 2em; }
	.ticketIndex .title > h4{ margin-top: 1em; }
	}



/* =============== 關於阿信 =============== */
.about01 { width:100%; height:100%; background:url(../img/01.jpg) no-repeat center center; background-size: cover; background-attachment:fixed; }
.about01 .title{ position: absolute; bottom:28%; left:0; right:0; margin: auto; width:80%; text-align:center; }
.about01 .title h1 {color:#FFF; font-family:'RageItalic'; text-shadow: 2px 0px 12px rgba(0, 0, 0, 0.7); margin-bottom: .5em; }
.about01 .title p { font-size:1.375rem; color:#FFF; line-height:180%;}
@media screen and (max-width:500px){
	.about01 .title p { font-size:1rem;  }
	}
	
.scrollBtn{ position:absolute; bottom:5%; left:0; right:0; width:90%; max-width:800px; margin:auto; text-align:center;  }
.scrollBtn a{ display:inline-block; padding:1em; width:32%; color:#FFF; background: url(../img/arrow.png) no-repeat center bottom;  }
.scrollBtn a:hover{ opacity:.8; transform: translateY(.3em); -webkit-transform: translateY(.3em); -moz-transform: translateY(.3em); -ms-transform: translateY(.3em); -o-transform: translateY(.3em); }
@media screen and (max-width:400px){
	.scrollBtn a{ font-size:.9em; }
	}


.about02{ width:100%; height:100%;  background:url(../img/02.jpg) no-repeat center center; background-size: cover; position:relative;  /*background-attachment:fixed;*/ }
.about02 .word { position:absolute; right: 10%; top: 25%; max-width: 500px; width: 80%; color:#FFF; }
.about02 .word h2{ font-size:3rem; margin-bottom:1em; }
.about02 .word h2 small { font-size:1.8rem; color:#C59952; margin-top:.5em;}
.about02 .word p{ line-height:180%; /*margin-bottom:1em;*/}
/*.about02 .word a{ display:inline-block; padding:.5em 2em; border:1px solid #FFF; color:#FFF;}
.about02 .word a:hover{ background: #fff; color:#333; }*/

.about03 { width:100%; height:100%; background:url(../img/03.jpg) no-repeat center center; background-size: cover; position:relative;  /*background-attachment:fixed; */}
.about03 .word { width:80%; max-width:1130px; position:absolute; top:25%; left:0; right:0; margin: auto;  color:#fff;   }
.about03 .word h2{ font-size:3rem; margin-bottom:1em; }
.about03 .word h2 small { font-size:1.8rem; color:#7A99DF; margin-top:.5em;}
.about03 .word p{ line-height:180%; margin-bottom:3em; max-width:500px;}

.about03 ul li{ display:inline-block;  vertical-align:middle; margin-bottom:.5em; }
.about03 ul li:after{ content: ''; margin: 0 1.8em; background: #7A99DF; display:inline-block; vertical-align:middle;  width: 1px; height:1em;   }
.about03 ul li a{ color:#fff; line-height: 150%;   }
.about03 ul li a:hover{ text-decoration: underline; }
.about03 ul li:last-child:after{ display:none; }

@media screen and (max-width:640px){
	 .about02, .about03{ min-height: 600px; height:auto;  }
	 .about02 .word h2 small, .about03 .word h2 small { font-size:1.2rem; }
	 .about03{ /*background: rgba(10,102,58,0.8); background: rgba(3,27,8,0.8); */ background: rgba(0,0,0,.2)}
	 .about03:after { content: ""; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1;  background:url(../img/03.jpg) no-repeat center center; opacity:1 }
	 .about02 .word, .about03 .word{ top: 15%; }
	}

.about04 { width:100%; min-height:90%; display:table; position:relative;  }
.about04:after{ content:''; clear:both; display:block; }
/*.about04_tit{ width:100%; padding: 5em 0; text-align:center; line-height:1em;  background: #ccc; color: #333; }*/
/*.about04_LR{ width:100%; min-height:100%; display:table; background:black;  }*/
.about04_L, .about04_R{ width:50%; display: table-cell; vertical-align: top; text-align:center; padding:9em 0 3em 0;   }
.about04_L{ background:url(../img/04.jpg) no-repeat center center; background-size:cover; }
.about04_R{ background:url(../img/05.jpg) no-repeat center center; background-size:cover; }
@media screen and (max-width:900px){
	.about04{ display:block; height:auto; }
	.about04_L, .about04_R{ width:100%; display: block; }
	}
	

.brand_txt{ width:80%; max-width:400px; margin:auto; color:#fff;   }
.brand_logo{  height:8em; margin:0 auto 2em auto;  }
.brand_logo img{ max-height:100%; width:auto; }
.brand_txt h2 { font-size:2rem; margin:2em auto; line-height:140%; height:2.3em; }
.brand_txt hr { width:67px; height:1px; background:#7E7069; margin:3em auto; }
.brand_txt p { margin:0 auto;line-height:180%; }
.colorGold{ color: #BB9C5F;}
@media screen and (max-width:510px){
	.brand_txt h2{ font-size:1.5rem !important;  }
	}

.aa2{ color: #FFF; margin:2em auto; max-width:240px; display: inline-block; text-align:center; padding:1em 3em; border-radius: 2px;   }
.aa2:before { display:inline-block; content:'+'; color:#fff; margin-right:.6em;  }
.aa2:hover{ /*border:solid 1px #fff; */ text-decoration:underline; letter-spacing:1px; /*background: rgba(255,255,255,.2)*/ }

@media screen and (max-width:640px){
	.about01, .about02 { background-attachment: scroll;  }
	}
	

/* =============== 巧克力叔叔 =============== */
.caocoUncle{ width:100%; height:auto; background:#e3d8c6 url(../img/aboutBrand-bgR.jpg) no-repeat right top; padding:8em 0 3em 0;}
.caocoUncle .title h2 {font-size:3.25rem;}
.caocoUncle .title h3 {font-size: 3rem;}
.caocoUncle .title hr {width:67px; height:1px; background:#8C4600; margin:3.5em 0;}

@media (max-width:600px) and (max-height:700px){
	.caocoUncle .title hr {width:67px; height:1px; background:#8C4600; margin:2em 0;}
	}

.caocoUncle_intro{  position:relative; }
.caocoUncle_intro li { overflow:hidden; width:100%; position:relative; margin-bottom:1em;  }
.caocoUncle_intro .img{ display:inline-block; width:49%; overflow:hidden; vertical-align:middle; }
.caocoUncle_intro .txt{ display:inline-block; width:49%; overflow:hidden; vertical-align:middle;  }
/*.caocoUncle_intro li:nth-child(1) .txt{ padding:1em 5em 1em 0; }
.caocoUncle_intro li:nth-child(2) .txt{ padding:8em 5em 4.8em 0; }
.caocoUncle_intro li:nth-child(3) .txt{ padding:6em 5em 4.8em 0; }*/
.caocoUncle_intro .img { text-align:center;  }
.caocoUncle_intro .img img{ vertical-align:top; }
.caocoUncle_intro .txt{ direction: ltr;  }
.caocoUncle_intro .txt h5{ font-size:1.5rem; margin-bottom:.8em; line-height: 160%; }
.caocoUncle_intro .txt small{ font-size:1.25rem; color:#999; display:block; line-height: 120%; }
.caocoUncle_intro .txt p{ line-height: 180%; margin:1em 0;}

.caocoUncle_intro li:nth-child(even){ direction: rtl; }
.caocoUncle_intro li:nth-child(even) .txt { padding-left:2em; }
.caocoUncle_intro li:nth-child(odd) .txt{ padding-right:2em;  }

/*.caocoUncle_intro:after, .caocoUncle_intro > li:after
{ display:block; content:''; clear:both;} 
.caocoUncle_intro > li:nth-child(odd) .img{ float: right; } 
.caocoUncle_intro > li:nth-child(odd) .img:after{ clear: right; }
.caocoUncle_intro > li:nth-child(even) .txt{ float: right; } 
.caocoUncle_intro > li:nth-child(even) .txt:after{ clear: right; }*/

.caoco_bottom{ margin-top: -2em; position:relative; text-align:center; min-height: 250px; }
.caoco01{ display:inline-block; margin:0 auto; }
.caoco02{ position:absolute; top:-2em; right:60%; width:38%; display:inline-block; text-align:right;   } 
@media screen and (max-width:1000px){ 
	 .caoco02{ left:0; }
	}
@media screen and (max-width:900px){ 
	 .caoco02{ display:none; }
	}
@media screen and (max-width:700px){ 
	.caocoUncle{   background-position: 110% -1em;
	-moz-background-size: auto 360px; -webkit-background-size: auto 360px; -o-background-size: auto 360px; background-size: auto 360px; }
	.caocoUncle .container{ width: 90%;  }
	.caocoUncle_intro  li{ margin-bottom: 3em;}
	.caocoUncle_intro .img, .caocoUncle_intro .txt{ display:block; direction: ltr; margin:0 auto;  }
	.caocoUncle_intro .img { width:80%;  }
	.caocoUncle_intro .txt { width:100%; padding-right:0 !important; padding-left:0 !important;   }	
	}
@media screen and (max-width:600px){ 
	.caocoUncle{   background-position: 105% -2em; -moz-background-size: 50% auto; -webkit-background-size: 50% auto; -o-background-size: 50% auto; background-size: 50% auto;}
}
@media screen and (max-height:620px){ 
	.caocoUncle{ padding: 4em 0 3em 0;  }
}	

.aaCannotWait{ display: block; width:90%; max-width:400px; margin: 1em auto; text-align:center; line-height:120%; color:#000;  }
.aaCannotWait i{ background:#000; width: 28px; height: 28px; line-height:28px;  border-radius: 50em; display:block; margin: .5em auto; }
.aaCannotWait i img{ vertical-align:middle; }
.aaCannotWait:hover{ letter-spacing: 1px; }
.aaCannotWait:hover i{ transform: translateY(1.05em); -webkit-transform: translateY(1.05em); -moz-transform: translateY(1.05em); -ms-transform: translateY(1.05em); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;  }
@media screen and (max-width:500px){ 
	.aaCannotWait{ font-size: .9rem; }
}	

#sell{ background: #000; }
.caocoInfo{ display:table; width:100%; background:#ebc542;  }
.caocoInfo:after{ content:''; display: block; clear:both; }
.caocoInfo li{ color:#FFF; width:33.3333%; overflow:hidden; display: table-cell; /*padding:7em 0 10em;*/ position:relative; text-align:center; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;  }
.caocoInfo li:nth-child(1){ background:#562c21; }
.caocoInfo li:nth-child(2){ background:#882b3e; }
.caocoInfo li:nth-child(3){ background:#ebc542; }
/*.caocoInfo li:nth-child(1):hover{ background: url(../img/bgChocoSell_nama.jpg) no-repeat 0 0; }
.caocoInfo li:nth-child(2):hover{ background: url(../img/bgChocoSell_choco.jpg) no-repeat 0 0;  }
.caocoInfo li:nth-child(3):hover{ background: url(../img/bgChocoSell_ice.jpg) no-repeat 0 0;  }*/
.caocoInfo img{ width:100%; opacity:0; vertical-align:top;}
.caocoInfo_txt{ position:absolute; top:50%; width:100%; margin-top:-3.2em; }
.caocoInfo_txt hr { width:37px; height:1px; background:rgba(255,255,255,.3); margin:0 auto 1.8em auto;  }
.caocoInfo_txt h6 { font-size:2rem; line-height:1.5em; color: #fff; }

.caocoInfo li{ cursor: pointer; }
.caocoInfo li:hover img{ transform: scale(1.01); -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -o-transform: scale(1.01); opacity:1; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;  }
.caocoInfo i{ font-size:1.5em; color:#FFF !important; display:block; width:38px; height:38px; border-radius:50%; text-align:center; line-height:38px; margin:0 auto;  
			font-style: normal;	border:solid 1px #fff; border-radius:50em; opacity:0; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); 
				 } 
.caocoInfo li:hover i{ opacity:1; margin-top:2em; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); animation-delay: .5s; -webkit-animation-delay: .5s; 
transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transform-origin: center center; -webkit-transform-origin: center center;   }
.caocoInfo li:hover .caocoInfo_txt{  transform: translateY(-3em); -webkit-transform: translateY(-3em); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } 
.caocoInfo li:hover hr{ opacity:0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;  }

@media (min-width:1440px){
	.caocoInfo img{ height: 400px; }
	}	
@media (max-width: 950px){ 
	.caocoInfo_txt h6 { font-size: 1.5rem; }
	.caocoInfo i{ font-size:1rem; width:26px; height:26px; line-height: 26px;  }
}	
@media (max-width: 700px){  
	.caocoInfo img, .caocoInfo li:hover img{ transform: scale(1.8); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8);  }
	.caocoInfo_txt{ margin-top: -2em; }
	.caocoInfo_txt h6 { font-size: 1rem; }
	.caocoInfo_txt hr { margin:0 auto 1em auto;  }
	.caocoInfo li{ padding:30px 0 0 0; }
}
@media (max-width: 450px){  
	.caocoInfo li{ padding:10px 0 2em 0; }
}

a.xCLOSE.closeSell span:before, a.xCLOSE.closeSell span:after{ background: rgba(255,255,255,0.50); }

.caocoList { width:100%; height:auto; padding:3em 0 10em 0; position:relative; }
/*.caocoList .x{ top:4.8em; }*/
.sell_type1{ background:url(../img/caocoInfoBG_1.jpg) no-repeat center center; background-size:cover;  }
.sell_type2{ background:url(../img/caocoInfoBG_2.jpg) no-repeat center center; background-size:cover;  }
.sell_type3{ background:url(../img/caocoInfoBG_3.jpg) no-repeat center center; background-size:cover;  }

.caocoList_tt{ text-align:center;color:#FFF; width:80%; margin:0 auto;  }
.caocoList_tt h3 { font-size:2.6rem;}
.caocoList_tt h4 { font-size:2rem; /*color:#8C4600;*/}
.caocoList_tt p{ margin-top:3.7em; line-height:180%;}

.ca_product { margin:3em auto;  }
.ca_product li { display:inline-block; width:32%; margin-bottom:3em; padding:2em; vertical-align:top;   }
.ca_product_img { overflow:hidden; width:15em; height:15em; margin:1em auto;  }
.ca_product_img img{ width:100%; height:auto; border-radius:50%;  }
.ca_product li > h6 { font-size:1.5rem; line-height: 1.5em; color:#FFF; margin-top:2.5em;  }
.ca_product li > hr { width:45px; height:2px; /*background:#8C4600;*/ margin:1em 0 }
.ca_product li > p{ color:#FFF; line-height:180%;}

.sell_type1 h4 { color:#8C4600; }
.sell_type2 h4 { color:#882B3E; }
.sell_type3 h4 { color:#EBC542; }
.sell_type1 .ca_product hr { background:#8C4600; }
.sell_type2 .ca_product hr { background:#882B3E; }
.sell_type3 .ca_product hr { background:#EBC542; }

a.buy{display: block; border:1px solid #FFF; color:#FFF; padding:1.1em 0; max-width:240px; width:80%; text-align:center;  /*position:absolute; left:48%; bottom:10%;*/ margin:1em auto;}
a.buy:hover{ background:#fff; color: #111; }

@media screen and (max-width:1000px){
	.ca_product_img { width: 10em; height:10em; margin: .5em auto;    }
	.ca_product li > h6 { margin-top:2em; font-size: 1rem; }
	}
@media screen and (max-width:700px){
	.ca_product li { padding:1em; width: 49%;  }
	.caocoList_tt h3 { font-size: 1.8rem;}
	.caocoList_tt h4 { font-size: 1.3rem; /*color:#8C4600;*/}
	.caocoList_tt p , .ca_product li > p{ font-size: .85rem;}
	}
@media screen and (max-width:500px){
	.ca_product_img { width: 8em; height:8em;   }
	}
@media screen and (max-width:400px){ 
	.caocoUncle_intro .txt p, .cafeIntro .txt p{ font-size: .9em; }
}	
	

.uncleBanner{ color:#FFF; width:100%; background:url(../img/bgChoco.jpg) no-repeat center center, url(../img/who.png) no-repeat right bottom;  background-size:cover; min-height:450px;/* padding:3.7em 3em 0 9.8em; */}
.uncleBanner .container { position:relative; padding-top:3.7em; min-height:450px}
.uncleBanner h3 { font-size:2.6rem; font-family: 微軟正黑體, "Gill Sans", "Gill Sans MT", "Myriad Pro", Arial, Helvetica, sans-serif, "Microsoft JhengHei"; }
.uncleBanner small { font-size:1.6rem; line-height:110%;}
.uncleBanner .img { background:url(../img/who.png) no-repeat center center; width:251px; min-height:312px;  position:absolute; right:0; bottom:0}

.uncleWord{ margin-top:3.7em; background:url(../img/uncle-line.png) no-repeat left top; padding-top:1.4em; }
.uncleWord li { margin-bottom:1.5em;}
.uncleWord li span, .uncleWord li p{ display:inline-block; vertical-align:top;}
.uncleWord li span { margin-right:1.5em;}
.uncleWord li p { line-height:150%; max-width:588px;}

@media screen and (max-width:965px){
	.uncleBanner .container { padding-bottom: 320px;}
	.uncleWord li span { font-size:1.2em; font-weight:bold; margin-bottom:.5em;}
	.uncleBanner .img {left:0; right:0; margin:auto; bottom:0;}
	}
@media screen and (max-width:600px){
	.uncleBanner h3{ font-size:1.8rem; }
	.uncleWord li p{ font-size: .9rem; }
}
.chocoMagic{ width:100%; height:auto; background:url(../img/caocoMagic_bg.jpg) no-repeat center center; background-size:cover; padding:6.2em 0;}
.chocoMagic .title { text-align:center;}
.chocoMagic .title h2 {font-size:3.25rem; }
.chocoMagic .title h3 { font-size: 3rem; color:#f7901F; }
.chocoMagic .title hr { width:67px; height:1px; background:#8C4600; margin-top:3.8em;}

.chocoMagic_txt{ margin-top:3rem; position:relative;  width:100%; }
.chocoMagic_txt li { overflow:hidden; width:100%; position:relative;  margin-bottom:2em; display:table;   }
.chocoMagic_txt li .img, .chocoMagic_txt li .txt{ display: table-cell; vertical-align:middle; width:50%; overflow:hidden;   }
/*.chocoMagic_txt li:nth-child(1) .txt{ padding:1em 5em 1em 0; } 
.chocoMagic_txt li:nth-child(2) .txt{ padding:8em 5em 4.8em 0;}
.chocoMagic_txt li:nth-child(3) .txt{ padding:6em 5em 4.8em 0}*/
.chocoMagic_txt li .img{ text-align: center;}
.chocoMagic_txt li .img img{ vertical-align:top; }
.chocoMagic_txt li .txt{ direction:ltr;}
.chocoMagic_txt li .txt h5{ font-size:1.5rem; margin-bottom:.3em; line-height:1.1em; }
.chocoMagic_txt li .txt small{ font-size:1.25rem; color:#999; line-height:1.1em; }
.chocoMagic_txt li .txt p{ line-height:180%; margin-top:2em }

.chocoMagic_txt:after, .chocoMagic_txt li{ display:block; content:''; clear:both; } 
@media screen and (min-width:601px){ 
.chocoMagic_txt li:nth-child(odd) .img{  padding-left:2em;} 
.chocoMagic_txt li:nth-child(even) .img{ padding-right:2em; } 
.chocoMagic_txt li:nth-child(even){ direction:rtl; }
}
@media screen and (max-width:600px){ 
	.chocoMagic .title h3{ font-size: 2rem; }
	.chocoMagic_txt li { display:block;  }
	.chocoMagic_txt li .txt{ display: block; width: 90%; margin:1em auto;  }
	.chocoMagic_txt li .img{ display: block; width: 90%; margin:0 auto 1em auto;    }
}


/*農場特色*/
.features { width:100%; min-height:100%; background:url(../img/features-bg.jpg) no-repeat center center; background-size:cover; padding-top:9em; padding-bottom:9em }
.features .title{ font-size:3em; text-align:center; margin-bottom:2em;  }
.features .title h2 { color:#FFF; display:inline-block; margin-right: .5em;}
.features .title span{ color:#F7901F;  display:inline-block;}
.feature_list{ width:100%; margin: 1em 0; text-align:center; }
.feature_list li{ display:inline-block; width:33.3%; vertical-align:top; margin-right:-4px; color:#FFF; margin-bottom:5em;  }
.feature_list li .item{ max-width:16em;   margin:0 auto;}
.feature_list li .icon{ width:4.5em; height:4.5em; border-radius:50%; border:1px solid rgba(255,255,255,0.5); margin:0 auto 1.5em auto;}
.feature_list li:nth-child(1) .icon { background:url(../img/features01.png) no-repeat center center;}
.feature_list li:nth-child(2) .icon { background:url(../img/features02.png) no-repeat center center;}
.feature_list li:nth-child(3) .icon { background:url(../img/features03.png) no-repeat center center;}
.feature_list li:nth-child(4) .icon { background:url(../img/features04.png) no-repeat center center;}
.feature_list li:nth-child(5) .icon { background:url(../img/features05.png) no-repeat center center;}
.feature_list li:nth-child(6) .icon { background:url(../img/features06.png) no-repeat center center;}

.feature_list li h6 { font-size:1.5rem; margin-bottom:1em;}
.feature_list li p{ line-height:180%;}

@media screen and (max-width:900px){ 
	.feature_list li{ width: 50%; padding: 0 .5em;}
	.feature_list li p{ font-size: .9em;}
	.feature_list li p br{ display:none; }
	 }
@media screen and (max-width:640px){ 
	.features { padding-top:7em; padding-bottom:3em }
	 }

.attractions{ padding:8em 0; border: 20px solid #DFD1A1;}
.attractions .title{ text-align:center; width:80%; margin:0 auto; }
.attractions .title h2{ font-size:3.25rem;  }
.attractions .title span{ font-size:2.25rem; color:#F7901F;}
.attractions .title hr {width:67px; height:1px; background:#999; margin:2em auto 1.8em;}
.attractions .title p { margin-bottom:1.9em; }
.attractions .title > a { display:inline-block; position:relative; padding-left:2.5em; color:#000}
.attractions .title > a:before{ position:absolute; content:''; width:34px; height:34px; background:#000 url(../img/arrow-R.png) no-repeat center center; border-radius:50%; left:0; top:-.5em}
.attractionsBox { margin: 4em auto 0 auto; width:100%;  max-width: 1130px; } 
.attractionsBox a { width: 92%; max-width: 300px; text-align:center; display:block; color:#000; margin:0 auto;   }
.attractionsBox a:hover{ opacity:.7; }
.attractionsBox .img { margin:0 auto 2em auto; display:block; width:12.5em; height:12.5em; }
.attractionsBox .img img { border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%;}
.attractionsBox h6{ font-size:1.1rem; }
.attractionsBox hr{ width:42px; height:1px; background:#CCC; margin:1.5em auto;}
.attractionsBox p{ line-height:180%; }

@media screen and (max-width:600px){ 
	.attractionsBox .img{ width:9em; height:9em;  }  
	.attractionsBox p{ font-size:.88rem; } 
	 }
@media screen and (max-width:460px){ 
	.attractions{  border: 10px solid #DFD1A1;}
	
	 }
@media screen and (max-width:600px) and (max-height:700px){ .attractions{ padding: 4em 0; } }

.attractionsBox figure{ float: none !important; margin: 0 auto !important;  }



/* =============== 牡丹灣 cafe =============== */
.mudan01{ width:100%; height:auto; background:#e3d8c6 url(../img/bgCoffee.jpg) no-repeat right 0; padding:8em 0 3em 0; }
.mudan01 .title h2 {font-size: 3.25rem ;}
.mudan01 .title h3 {font-size: 3rem; }
.mudan01 .title hr {width:67px; height:1px; background:#8C4600; margin:3.8em 0;   }

.cafeIntro{  position:relative; }
.cafeIntro li { overflow:hidden; width:100%; position:relative; margin-bottom:1em;  }
.cafeIntro .img, .cafeIntro .txt{ display:inline-block; width:49%; overflow:hidden; vertical-align:middle;  }
.cafeIntro .img { text-align:center;  }
.cafeIntro .img img{ vertical-align:top; }
.cafeIntro .txt{ direction: ltr;  }
.cafeIntro .txt h5{ font-size:1.5rem; margin-bottom:.8em; line-height: 160%;  }
.cafeIntro .txt small{ font-size:1.25rem; color:#999; display:block; line-height: 120%;  font-family:  'Myriad Pro', 'Helvetica Neue', 'Helvetica', 'Arial', 'MHei', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif;  }
.cafeIntro .txt p{ line-height:180%; margin-top:2em; font-family:  'Myriad Pro', 'Helvetica Neue', 'Helvetica', 'Arial', 'MHei', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif; }

@media screen and (max-width:980px){ 
	.mudan01 .title h2 {font-size: 2.2rem ;}
	.mudan01 .title h3 {font-size: 1rem; } 	
	}	
@media screen and (max-width:880px){ 
	.mudan01 { background-position:140% -3em; } 	
	}		
@media screen and (max-width:600px){ 
	 .mudan01 { background-size: 60% auto;} 
	}	
@media screen and (min-width:641px){ 
	.cafeIntro li:nth-child(even){ direction: rtl; }
	.cafeIntro li:nth-child(even) .txt { padding-left:2em; }
	.cafeIntro li:nth-child(odd) .txt{ padding-right:2em;  }
	}
@media screen and (max-width:640px){ 
	.mudan01 .title { width:100%; margin:0 auto; }
 	.cafeIntro .img, .cafeIntro .txt{ display: block; width:100%; margin:1em auto; }
	}
@media screen and (max-height:620px){ 
	 .mudan01 { padding: 4em 0 3em 0; } 
	 .mudan01 .title hr { width:67px; height:1px; background:#8C4600; margin: 2.2em 0 2em 0;}
	}	
	

.mudan02{ width:100%; background:url(../img/mudanbg02.jpg) no-repeat center bottom; background-size: cover; position:relative; }
.mudan02_txt{ width:100%; max-width:1130px; margin:0 auto; padding:7em 0 9em 0; }
.mudan02_txt h3{ font-size:3.25rem; margin-bottom:1em; line-height:1em; color:#fff; } 
.mudan02_txt p{ font-size:1.1rem; max-width: 400px; color:#FFF; line-height:180%; }
@media screen and (max-width:1200px){  
	.mudan02_txt{ padding:7em 3em;}
	}
@media screen and (max-width:1000px){  
	.mudan02{ background:url(../img/mudanbg02_s.jpg) no-repeat center bottom; background-size: auto 100%;} 
	}
@media screen and (max-width:800px){  
	.mudan02_txt{ background:rgba(0,0,0,0.4); padding: 5em 5em 10em 2em;  }
	.mudan02_txt h3{ font-size: 2rem; } 
	.mudan02{ background-position: 70% bottom;  background-size: auto 100%; } 
	}

.mudan03{   }
.CaCh{ display:table; width:100%; }
.CaCh li{ display: table-cell; width:50%; background:#882B3E; color:#fff; vertical-align:middle; position:relative; }
.CaCh_img { overflow: hidden; }
.CaCh_img img{  width:100%; }
.CaCh_txt{ width: 80%; margin-left:auto; margin-right:auto; }
.CaCh_txt h2{ line-height: 120%; }
.CaCh_txt p{ margin-top:2em; margin-bottom:2em; line-height: 180%;  color:#EDEDED; max-width:400px; display:block; }
.CaCh_txt a:hover{ text-decoration: underline;  }

@media screen and (min-width:1500px){  
	.CaCh_img{ height:480px;}
	}
@media screen and (min-width:801px) and (max-width:960px){  
	.CaCh_img{ height:400px; }
	.CaCh_img img { transform: scale(1.5); -webkit-transform: scale(1.5); transform-origin: center 0 ; -webkit-transform-origin: center 0;  }
	}
@media screen and (min-width:641px) and (max-width:800px){  
	.CaCh_img{ height:400px; }
	.CaCh_img img { transform: scale(2); -webkit-transform: scale(2); transform-origin: center 0 ; -webkit-transform-origin: center 0;  }
	.CaCh_txt p{ font-size:.9em;}
	}
@media screen and (max-width:640px) {  
	.CaCh{ display: block; }
	.CaCh li{ display: block; width: 100%;   }
	.CaCh_txt{ padding:3em 0;}
	}	
	
.circleBLKarrow{ background:#000; width:28px; height:28px; line-height:25px; text-align:center; display:inline-block;   margin-right:1em; border-radius:50em; }
.circleBLKarrow img{  vertical-align: middle;    }


/* =============== 認識植物 =============== */
.learnPlant{ background:url(../img/bgPlant.jpg) no-repeat; background-size:cover; padding-top:5.5em; padding-bottom:5em;  position:relative;}
.learnPlant .word{ text-align:center;}
.learnPlant .word h3 { font-size:3.25rem;}
.learnPlant .word h4 { font-size:2.25rem; color:#72D8CC}
.learnPlant .word hr { width:61px; height:1px; background:#AAA; margin:2.5em auto 2em;}
.learnPlant .word p{ max-width:772px; margin: auto; line-height:180%;}
.learnPlant .word .mt2 { margin-top:2.6em; max-width:650px;}

.btnPlant{ margin-top:4em; margin-bottom:4em; text-align:center;}
.btnPlant a { width:130px; height:130px; border-radius:50%; display:inline-block; margin-right:3.5em; vertical-align:top; position:relative; background-color: #eee;
-webkit-box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.2); -moz-box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.2); box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.2);
background-repeat: no-repeat; background-position: center 35%;
 }
.btnPlant a p{ position:absolute; bottom:15%; left:0; right:0; margin:auto; }
/*.btnPlant a:nth-child(1) { background-image: url(../img/i-plant01.png); background-repeat: no-repeat; background-position: center 35%; }
.btnPlant a:nth-child(2) { background-image: url(../img/i-plant02.png); background-repeat: no-repeat; background-position: center 35%; }
.btnPlant a:nth-child(3) { background-image: url(../img/i-plant03.png); background-repeat: no-repeat; background-position: center 35%; }*/
.btnPlant a:last-child{ margin-right:0; } 
.btnPlant a:hover{ background-color:#7AE0D5; }

.plantSide{ width:100%;}
.plantSide li { display:inline-block; vertical-align:top; width:25%; margin-right: -4px; margin-bottom:4.4em; }
.plantSide li a{ display:block; margin:0 auto; width:90%; max-width:220px;  }
.plantSide li .img  { position:relative;   }
.plantSide li .img img { width:100%; height:auto;  }
.plantSide li .tit{ font-weight:bold; padding:0 .5em; line-height:150%; margin-top: 1.5em;  }
.plantSide li .tit h6{ font-weight:bold; font-size:1.25rem; margin:.3em 0; /*margin-top:1.25em; margin-bottom:.8em;*/ }
.plantSide li .tit small{ font-size:1rem; }
.plantSide li .mask { position:absolute; top:0; left:0; width:100%; height: 100%; color:#fff; background:rgba(0,0,0,.6); overflow:hidden; text-align:center; display: block; padding:.3em; line-height:150%;
	 opacity:0; -moz-opacity: 0;  -khtml-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	 -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.plantSide li:hover .mask, .plantSide li.tap .mask{  opacity: 1; -moz-opacity: 1;  -khtml-opacity: 1; 
	filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
	
.plantSide li .mask span{ font-size:1.2em; color:#FFF; position:absolute; left:0; right:0; margin:auto; top: 60%; padding:.5em; }
/*.plantSide li .inner .mask span:before{ position:absolute; content:'+'; width: 1.5em; height:1.5em; border-radius:50%; background:#75D8CF; color:#FFF; line-height:1.5em;}*/

.plus{  display:block; text-align:center; margin:auto; position:absolute; left:0; right:0; margin:auto; top:40%; font-style: normal;
		 font-size:2em; width: 1.2em; height:1.2em; line-height:1.2em; color: #fff; background:#75D8CF;
		 border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; 
			}
.aaloadMore{ display:block; position:absolute; bottom:5%; left:0; right:0; width: 60%; max-width:240px; margin:0 auto; text-align:center; }
.aaloadMore i{ display:block; margin:.5em auto; width:15px; height:9px; background: url(../img/arrow-black.png) no-repeat center center; border-radius:50%;  }


@media screen and (max-width:900px){
	.btnPlant a{ width: 6em; height: 6em;  margin-right: 1em;   }
	.btnPlant a p{ font-size:.8rem; }
	.plantSide li { width:33%; }
	}
@media screen and (max-width:500px){ 
	.btnPlant a{ width: 4.8em; height: 4.8em;  margin-right: .6em; background-size: auto 30%; }
	.plantSide li { width:49%; }
	}

.plant-detail { padding: 3em 0 ;  }
/*.plant-detail > .x { top:4.6em;}*/
.plant-detail-tt { text-align:center; margin-top:5em;}
.plant-detail-tt small {font-size:1rem;}
.plant-detail-tt h3 { font-size:1.8rem; font-weight:bold; letter-spacing:1px; margin-top:.4em}

.plant-des{ width:100%; border-top:5px solid #DDD; margin-top:3.7em; display:table;  }
.plant-des .img, .plant-des .txt { display:table-cell; vertical-align: middle; padding:2em 0; }
.plant-des .img { width:40%;  }
.plant-des .txt { width:60%; padding-left:1em;  }
.plant-des .txt h4 { font-size:3rem; margin:1em 0 1.1em;}

.plant-cont { width:100%;}
.plant-cont li { margin-bottom:.9em; }
.plant-cont li span, .plant-cont li p{ display:inline-block; }

.tableStyle{ width:100%; padding:1em 0; border-top:1px solid #DDD;}
.tableStyle .tit,.tableStyle .word{ padding:1em 0; display:inline-block; margin-right:-4px; vertical-align:top; line-height: 150%; }
.tableStyle .tit{ width:40%; }
.tableStyle .word{ width:60%; font-weight: normal; }
.tableStyle .word pre{ font-size: 1em; font-family: inherit; line-height: 1.5em; }
.tableStyle .tit h4{ line-height: 150%; }

.buyPlant{ width:100%; min-height:430px; background:#3F6454;}
.buyPlant .container_s{ position:relative; padding-top:3.7em; min-height:430px; background:url(../img/buyPlant.jpg) no-repeat right bottom;  }
/*.buyPlant .img { width:661px; height:275px; position:absolute; right:0; bottom:0px;  }*/
.buyPlant .txt h4{ font-size:3rem; color:#C59952; margin-bottom:1em;}
.buyPlant .txt p{ color:#FFF; line-height:180%;margin-bottom:2em;}
.buyPlant .txt a{ display:inline-block; border:1px solid #FFF; padding:.7em .9em; color:#FFF;}
.buyPlant .txt a:hover{ background: #fff; color:#3F6454;}

@media screen and (max-width:800px){
	.plant-des, .plant-des .img, .plant-des .txt { display: block; width:100%;  }
	.plant-des { margin-top: 2em; }
	.plant-des .txt { line-height:1.2em;  }
	.plant-des .img { text-align:center; background: #DDD;  }
	.plant-des .img img{ max-width: 80%; height:auto; }	
	.tableStyle .tit, .tableStyle .word{ width:100%;   }
	.plant-detail{ padding-top: 1.5em;}
	.plant-detail-tt{ margin-top: 3em; }
}

@media screen and (min-width:501px) and (max-width:1000px){
	.buyPlant .container_s{ background-size: 70% auto;}
	}
@media screen and (max-width:500px){
	.buyPlant .container_s{ padding:2.5em 0 8em 0; background-size: 90% auto; }
	.plant-detail{ padding-top: 0;}
	.plant-des .img, .plant-des .txt { padding:1.5em 0; }
}
@media screen and (max-height:700px){
	.plant-detail-tt{ margin-top: 0; }
}
 

/***** tooltip *********/
[data-tooltip] {  position: relative; z-index: 2;  cursor: pointer; }

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-bottom: 5px;
	margin-left: -50px;   
	padding: 7px;
	width: 110px;  
	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, 0.9);
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 12px;
	line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	border-top: 5px solid #000;
	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
}

@media (min-width:1024px){
	/* Show tooltip content on hover */
	[data-tooltip]:hover:before,
	[data-tooltip]:hover:after {
		visibility: visible;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity: 1;
	}
}


/*****animated*********/
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.hide, .wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceIn, .fadeInUp, .fadeIn, .fadeInDown, .zoomInUp, .fadeInRight{ visibility: visible !important; }

.delay-02s { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.delay-02s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-06s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay-07s { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; }
.delay-08s { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; }
.delay-09s { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }
.delay-10s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-15s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-20s { animation-delay: 2s; -webkit-animation-delay: 2s; }
.delay-25s { animation-delay: 2s; -webkit-animation-delay: 2s; }
.delay-30s { animation-delay: 3s; -webkit-animation-delay: 3s; }
.delay-35s { animation-delay: 3s; -webkit-animation-delay: 3s; }

@-webkit-keyframes bounceIn {
		0%, 20%, 40%, 60%, 80%, 100% {
				-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3);  transform: scale3d(.3, .3, .3); }
		20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
		40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
		60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
		80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
		100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1); }
}

@keyframes bounceIn {
		0%, 20%, 40%, 60%, 80%, 100% {
				-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3);  transform: scale3d(.3, .3, .3); }
		20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
		40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
		60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
		80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
		100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1); }
}
.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; }


@-webkit-keyframes fadeInUp {
		0% {  opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		100% {  opacity: 1;  -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp {
		0% {  opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		100% {  opacity: 1;  -webkit-transform: none; transform: none; }
}
.fadeInUp { -webkit-animation-name: fadeInUp;  animation-name: fadeInUp; }
@-webkit-keyframes fadeIn {
		0% {opacity: 0; }
		100% {opacity: 1; }
}
@keyframes fadeIn {
		0% {opacity: 0; }
		100% {opacity: 1; }
}
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@-webkit-keyframes slideInLeft {
		0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible;  }
		100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInLeft {
		0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible;  }
		100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
.slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft;}

@-webkit-keyframes slideInRight {
		0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; }
		100% {  -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInRight {
		0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; }
		100% {  -webkit-transform: translateX(0); transform: translateX(0); }
}
.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; }
 
 
@-webkit-keyframes fadeInDown {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
		}

		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@keyframes fadeInDown {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
		}

		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

.fadeInDown {
		-webkit-animation-name: fadeInDown;
		animation-name: fadeInDown;
}
 


@-webkit-keyframes zoomInUp {
		0% {
				opacity: 0;
				-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 600px, 0);
				transform: scale3d(.1, .1, .1) translate3d(0, 600px, 0);
				-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
				animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		}

		60% {
				opacity: 1;
				-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
				transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
				-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
				animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		}
}

@keyframes zoomInUp {
		0% {
				opacity: 0;
				-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 600px, 0);
				transform: scale3d(.1, .1, .1) translate3d(0, 600px, 0);
				-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
				animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		}

		60% {
				opacity: 1;
				-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
				transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
				-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
				animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		}
}

.zoomInUp {
		-webkit-animation-name: zoomInUp;
		animation-name: zoomInUp;
}



@-webkit-keyframes fadeInRight {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(100%, 0, 0);
				transform: translate3d(100%, 0, 0);
		}

		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@keyframes fadeInRight {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(100%, 0, 0);
				transform: translate3d(100%, 0, 0);
		}

		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

.fadeInRight {
		-webkit-animation-name: fadeInRight;
		animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}

		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@keyframes fadeInLeft {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}

		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

.fadeInLeft {
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
}

/* 20210715 add by Kevin */
.slick-dots{
	bottom: 30px;
}

.slick-dots li button::before{
	color: #fff !important;
	opacity: 0.6;
}

.slick-dots li.slick-active button::before{
	opacity: 1;
}



/*.grid-hover{  tap-highlight-color: rgba(0,0,0,0);  text-decoration: none;  touch-callout: none;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
.grid-hover.tap {  background: rgba(234,96,31,0.5); }*/