/*****************************************
*                  body                  *
*****************************************/

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {outline: 0;}

html {
	/* padding-top: 152px;
	padding-bottom: 160px; */
	overflow-y: scroll;
	text-size-adjust: none;
}

body {
	font-size: 24px;
	font-family: 'Noto Sans S Chinese', 'sourcehansans-tc', 'source-han-sans-traditional', 'Noto Sans TC', 'Microsoft JhengHei', Tahoma, Verdana, Arial, sans-serif;
	background: url(../images/common/bg.jpg) #f5fcff center top no-repeat;
}

a {text-decoration: none; cursor: pointer;}
a:hover {text-decoration: none;}

#wrap {
	position: relative;
	width: 100%;
}

#wrap2 {
	position: relative;
	overflow: hidden;
}

.outer {
	position: relative;
	width: 100%;
}

.inner {
	position: relative;
	width: 750px;
	margin: 0 auto;
}

#leaves {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#leaves canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#tips {
	display: none;
}

.desktop #tips {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/common/tips.jpg) #e5edf0 center top no-repeat;
	background-size: contain;
}

.desktop #loading,
.desktop #wrap {
	display: none;
}

/*****************************************
*                 header                 *
*****************************************/

#header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 152px;
	/* border-bottom: #000 1px solid; */
	background: #ffffff;
	overflow: hidden;
	/* box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px; */
	z-index: 3;
}

#header .inner {
	height: 100%;
}

#header .logo {
	width: 280px;
	height: 100%;
}

#header .logo a {
	display: block;
	height: 100%;
	background: url(../images/header-logo.png) center center no-repeat;
}

/*****************************************
*                  main                  *
*****************************************/

#main {
}

.section {
	position: relative;
}

#index {
	height: 1000px;
}

#index .title {
	top: 102px;
	left: 214px;
	width: 358px;
	height: 164px;
	background: url(../images/index/title.png) 0 0 no-repeat;
}

#index .bottle {
	top: 339px;
	left: 0;
	width: 460px;
	height: 741px;
	background: url(../images/index/bottle.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-intro {
	height: 1700px;
}

#fiveSenses-intro .title {
	top: 245px;
	left: 562px;
	width: 460px;
	height: 741px;
	background: url(../images/fiveSenses-intro/title.png) 0 0 no-repeat;
}

#fiveSenses-intro .text-1 {
	top: 309px;
	left: 312px;
	width: 126px;
	height: 453px;
	background: url(../images/fiveSenses-intro/text-1.png) 0 0 no-repeat;
}

#fiveSenses-intro .text-2 {
	top: 1107px;
	left: 119px;
	width: 166px;
	height: 420px;
	background: url(../images/fiveSenses-intro/text-2.png) 0 0 no-repeat;
}

#fiveSenses-intro .pattern {
	top: 245px;
	left: 0;
	width: 148px;
	height: 517px;
	background: url(../images/fiveSenses-intro/pattern.png) 0 0 no-repeat;
}

#fiveSenses-intro .extra {
	top: 1098px;
	right: 0;
	width: 420px;
	height: 449px;
	background: url(../images/fiveSenses-intro/extra.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-smell {
	height: 1600px;
}

#fiveSenses-smell .title {
	top: 171px;
	left: 267px;
	width: 158px;
	height: 265px;
	background: url(../images/fiveSenses-smell/title.png) 0 0 no-repeat;
}

#fiveSenses-smell .text-1 {
	top: 514px;
	left: 108px;
	width: 513px;
	height: 148px;
	background: url(../images/fiveSenses-smell/text-1.png) 0 0 no-repeat;
}

#fiveSenses-smell .text-2 {
	top: 1348px;
	left: 135px;
	width: 480px;
	height: 88px;
	background: url(../images/fiveSenses-smell/text-2.png) 0 0 no-repeat;
}

#fiveSenses-smell .image-1 {
	top: 699px;
	right: 0;
	width: 655px;
	height: 612px;
	background: url(../images/fiveSenses-smell/image-1.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-taste {
	height: 3600px;
}

#fiveSenses-taste .title {
	top: 180px;
	left: 263px;
	width: 162px;
	height: 260px;
	background: url(../images/fiveSenses-taste/title.png) 0 0 no-repeat;
}

#fiveSenses-taste .text-1 {
	top: 518px;
	left: 59px;
	width: 631px;
	height: 149px;
	background: url(../images/fiveSenses-taste/text-1.png) 0 0 no-repeat;
}

#fiveSenses-taste .text-2 {
	top: 1436px;
	left: 75px;
	width: 600px;
	height: 208px;
	background: url(../images/fiveSenses-taste/text-2.png) 0 0 no-repeat;
}

#fiveSenses-taste .text-3 {
	top: 2420px;
	left: 119px;
	width: 510px;
	height: 298px;
	background: url(../images/fiveSenses-taste/text-3.png) 0 0 no-repeat;
}

#fiveSenses-taste .image-1 {
	top: 701px;
	left: 0;
	width: 619px;
	height: 646px;
	background: url(../images/fiveSenses-taste/image-1.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-taste .image-2 {
	top: 1688px;
	right: 0;
	width: 648px;
	height: 627px;
	background: url(../images/fiveSenses-taste/image-2.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-taste .image-3 {
	top: 2770px;
	right: 0;
	width: 750px;
	height: 451px;
	background: url(../images/fiveSenses-taste/image-3.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-taste .btn-1 {
	top: 3336px;
	left: 79px;
	width: 592px;
	height: 108px;
	background: url(../images/fiveSenses-taste/btn-1.png) #bea566 center center no-repeat;
}

#fiveSenses-sight {
	height: 3100px;
}

#fiveSenses-sight .title {
	top: 183px;
	left: 268px;
	width: 157px;
	height: 261px;
	background: url(../images/fiveSenses-sight/title.png) 0 0 no-repeat;
}

#fiveSenses-sight .text-1 {
	top: 526px;
	left: 84px;
	width: 582px;
	height: 299px;
	background: url(../images/fiveSenses-sight/text-1.png) 0 0 no-repeat;
}

#fiveSenses-sight .text-2 {
	top: 2003px;
	left: 67px;
	width: 616px;
	height: 239px;
	background: url(../images/fiveSenses-sight/text-2.png) 0 0 no-repeat;
}

#fiveSenses-sight .image-1 {
	top: 878px;
	left: 0;
	width: 698px;
	height: 1005px;
	background: url(../images/fiveSenses-sight/image-1.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-sight .image-2 {
	top: 2292px;
	left: 0;
	width: 750px;
	height: 451px;
	background: url(../images/fiveSenses-sight/image-2.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-sight .btn-1 {
	top: 2824px;
	left: 79px;
	width: 592px;
	height: 108px;
	background: url(../images/fiveSenses-sight/btn-1.png) #bea566 center center no-repeat;
}

#fiveSenses-hearing {
	height: 3600px;
}

#fiveSenses-hearing .title {
	top: 178px;
	left: 269px;
	width: 156px;
	height: 265px;
	background: url(../images/fiveSenses-hearing/title.png) 0 0 no-repeat;
}

#fiveSenses-hearing .text-1 {
	top: 523px;
	left: 90px;
	width: 569px;
	height: 148px;
	background: url(../images/fiveSenses-hearing/text-1.png) 0 0 no-repeat;
}

#fiveSenses-hearing .text-2 {
	top: 1447px;
	left: 74px;
	width: 584px;
	height: 208px;
	background: url(../images/fiveSenses-hearing/text-2.png) 0 0 no-repeat;
}

#fiveSenses-hearing .image-1 {
	top: 695px;
	left: 0;
	width: 616px;
	height: 671px;
	background: url(../images/fiveSenses-hearing/image-1.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-hearing .image-2 {
	top: 1696px;
	right: 0;
	width: 633px;
	height: 624px;
	background: url(../images/fiveSenses-hearing/image-2.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-hearing .swiper {
	top: 2500px;
	left: 0;
	width: 100%;
	/* z-index: -1; */
}

#fiveSenses-hearing .caption {
	position: absolute;
	top: -60px;
	left: 0;
	width: 362px;
	height: 364px;
	background: url(../images/fiveSenses-hearing/caption-bg.png);
	z-index: 2;
}

#fiveSenses-hearing .caption > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	/* transform: translateY(20px); */
	-webkit-transition: .5s ease-out;
	-moz-transition: .5s ease-out;
	-ms-transition: .5s ease-out;
	-o-transition: .5s ease-out;
	transition: .5s ease-out;
}

#fiveSenses-hearing .caption > img.current {
	opacity: 1;
	/* transform: translateY(0); */
}

#fiveSenses-hearing .swiper-container {
	padding: 0 0 40px;
	box-sizing: border-box;
}

#fiveSenses-hearing .swiper-slide {
	perspective: 1000px;
}

#fiveSenses-hearing .swiper .card {
	width: 580px;
	margin: 0 auto;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: 1s ease-out;
	-moz-transition: 1s ease-out;
	-ms-transition: 1s ease-out;
	-o-transition: 1s ease-out;
	transition: 1s ease-out;
}

#fiveSenses-hearing .swiper .swiper-slide:nth-child(1) .card {
	-webkit-transition-delay: .25s;
	-moz-transition-delay: .25s;
	-ms-transition-delay: .25s;
	-o-transition-delay: .25s;
	transition-delay: .25s;
}

#fiveSenses-hearing .swiper .swiper-slide:nth-child(2) .card {
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-ms-transition-delay: .5s;
	-o-transition-delay: .5s;
	transition-delay: .5s;
}

#fiveSenses-hearing .swiper .swiper-slide:nth-child(3) .card {
	-webkit-transition-delay: .75s;
	-moz-transition-delay: .75s;
	-ms-transition-delay: .75s;
	-o-transition-delay: .75s;
	transition-delay: .75s;
}

#fiveSenses-hearing .swiper.transition .card {
	opacity: 0;
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
}

#fiveSenses-hearing .swiper .cover {
	height: 430px;
	background: #d8e5ea;
	overflow: hidden;
}

#fiveSenses-hearing .swiper .cover img {
	transform: scale(1);
	transition: .5s ease-out;
	filter: blur(0);
}

#fiveSenses-hearing .swiper .current .cover img {
	transform: scale(1.05);
	filter: blur(3px);
}

#fiveSenses-hearing .swiper .poetry {
	position: relative;
	height: 516px;
	color: #000;
	font-size: 28px;
	font-weight: 300;
	background: #fff;
}

#fiveSenses-hearing .poetry .page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	padding: 110px 0 0 70px;
	box-sizing: border-box;
}

#fiveSenses-hearing .poetry .page p {
	color: #b5aead;
	margin-bottom: 32px;
	/* -webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s; */
}

#fiveSenses-hearing .poetry .page p.current {
	color: #231815;
}

#fiveSenses-hearing .poetry:before,
#fiveSenses-hearing .poetry:after {
	position: absolute;
	content: '';
}

#fiveSenses-hearing .poetry:before,
#fiveSenses-hearing .poetry:after,
#fiveSenses-hearing .swiper .btn-play {
	opacity: 0;
	-webkit-transition: opacity .35s ease-out;
	-moz-transition: opacity .35s ease-out;
	-ms-transition: opacity .35s ease-out;
	-o-transition: opacity .35s ease-out;
	transition: opacity .35s ease-out;
	pointer-events: none;
}

#fiveSenses-hearing .swiper-slide-active .poetry:before,
#fiveSenses-hearing .swiper-slide-active .poetry:after,
#fiveSenses-hearing .swiper-slide-active .btn-play {
	opacity: 1;
	pointer-events: auto;
}

#fiveSenses-hearing .poetry:before {
	top: 18px;
	right: -16px;
	width: 50px;
	height: 52px;
	background: url(../images/fiveSenses-hearing/deco-1.png) 0 0 no-repeat;
	z-index: 2;
}

#fiveSenses-hearing .poetry:after {
	bottom: -25px;
	left: -14px;
	width: 55px;
	height: 52px;
	background: url(../images/fiveSenses-hearing/deco-2.png) 0 0 no-repeat;
	z-index: 2;
}

#fiveSenses-hearing .note {
	position: absolute;
	right: 168px;
	bottom: 78px;
	color: #bea566;
	font-size: 28px;
	font-style: italic;
	font-weight: 300;
}

#fiveSenses-hearing .swiper .btn-play {
	position: absolute;
	right: 20px;
	bottom: 30px;
	width: 124px;
	height: 124px;
	border-radius: 50%;
	background: url(../images/fiveSenses-hearing/btn-play.png) #bea566 52px center no-repeat;
	-webkit-transition: opacity .35s ease-out, -webkit-transform .5s ease-out;
	-moz-transition: opacity .35s ease-out, -moz-transform .5s ease-out;
	-ms-transition: opacity .35s ease-out, -ms-transform .5s ease-out;
	-o-transition: opacity .35s ease-out, -o-transform .5s ease-out;
	transition: opacity .35s ease-out, transform .5s ease-out;
}

#fiveSenses-hearing .swiper .btn-play.playing {
	background-image: url(../images/fiveSenses-hearing/btn-pause.png);
	background-position: center center;
	/* transform: scale(0.9); */
}

#fiveSenses-hearing .swiper-container-horizontal>.swiper-pagination-bullets {
	line-height: 0;
}

#fiveSenses-hearing .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 13px;
	border: #bea566 1px solid;
	background: transparent;
	box-sizing: border-box;
	opacity: 1;
}

#fiveSenses-hearing .swiper-pagination-bullet-active {
	background: #bea566;
}





#fiveSenses-touch {
	/* height: 2268px; */
	height: 2380px;
}

#fiveSenses-touch .title {
	top: 222px;
	left: 255px;
	width: 170px;
	height: 255px;
	background: url(../images/fiveSenses-touch/title.png) 0 0 no-repeat;
}

#fiveSenses-touch .text-1 {
	top: 557px;
	left: 123px;
	width: 503px;
	height: 208px;
	background: url(../images/fiveSenses-touch/text-1.png) 0 0 no-repeat;
}

#fiveSenses-touch .image-1 {
	top: 811px;
	left: 0;
	width: 750px;
	height: 788px;
	background: url(../images/fiveSenses-touch/image-1.png) 0 0 no-repeat;
	z-index: -1;
}

#fiveSenses-touch .btn-1 {
	top: 1648px;
	left: 79px;
	width: 592px;
	height: 108px;
	background: url(../images/fiveSenses-touch/btn-1.png) #bea566 center center no-repeat;
}

#fiveSenses-touch .btn-2 {
	top: 1835px;
	left: 79px;
	width: 592px;
	height: 108px;
	background: url(../images/fiveSenses-touch/btn-2.png) #bea566 center center no-repeat;
}

#fiveSenses-touch .btn-3 {
	top: 2024px;
	left: 79px;
	width: 592px;
	height: 108px;
	background: url(../images/fiveSenses-touch/btn-3.png) #bea566 center center no-repeat;
}

#shortcut {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110px;
	background: #bea566;
	z-index: 2;
	transition: bottom .35s;
}

#shortcut.hide {
	bottom: -110px;
}

#shortcut ul {
	height: 100%;
	font-size: 0;
	text-align: center;
}

#shortcut li {
	position: relative;
	display: inline-block;
	width: 33%;
	height: 100%;
	padding-right: 1px;
	box-sizing: border-box;
}

#shortcut li:last-child {
	padding: 0;
}

#shortcut li:after {
	content: '';
	position: absolute;
	top: 50px;
	right: 0;
	width: 1px;
	height: 20px;
	background: #fff;
}

#shortcut li:last-child:after {
	content: none;
}

#shortcut li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/common/shortcut.png);
	background-repeat: no-repeat;
}

#shortcut li a.blog {
	background-position: left center;
}

#shortcut li a.site {
	background-position: center center;
}

#shortcut li a.share {
	background-position: right center;
}




/*****************************************
*                 footer                 *
*****************************************/

/*****************************************
*                warnings                *
*****************************************/

/*****************************************
*                   pop                  *
*****************************************/

#pop {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    /* width: 960px; */
    height: auto;
	min-height: 100%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
    z-index: 3;
}

#pop {
    left: 0;
	width: 100%;
	/* overflow-x: hidden; */
	-webkit-transform: translateX(0);
	transform: translateX(0);
	z-index: 6;
}

.pop-container {
	position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
}

.pop-main {
	position: relative;
}

/*****************************************
*                  menu                  *
*****************************************/

/*****************************************
*                 loading                *
*****************************************/

#loading {
	/* display: none; */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 1337px;
	background: url(../images/common/loading-bg.jpg) #fff center top no-repeat;
	background-size: cover;
	z-index: 1;
}

#loading .logo,
#loading .brand,
#loading .new {
	-webkit-transition: .75s ease-out;
	-moz-transition: .75s ease-out;
	-ms-transition: .75s ease-out;
	-o-transition: .75s ease-out;
	transition: .75s ease-out;
	opacity: 0;
}

#loading.intro .logo,
#loading.intro .brand,
#loading.intro .new {
	opacity: 1;
}

#loading .logo {
	top: 43px;
	left: 45px;
	width: 118px;
	height: 31px;
	background: url(../images/common/loading-logo.png) 0 0 no-repeat;
}

#loading .brand {
	top: 346px;
	left: 311px;
	width: 161px;
	height: 711px;
	background: url(../images/common/loading-brand.png) 0 0 no-repeat;
}

#loading .new {
	top: 240px;
	left: 430px;
	width: 130px;
	height: 131px;
	background: url(../images/common/loading-new.png) 0 0 no-repeat;
}

#loading .bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 7px;
}

#loading .bar .progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #ddc683;
	-webkit-transition: .75s;
	-moz-transition: .75s;
	-ms-transition: .75s;
	-o-transition: .75s;
	transition: .75s;
}

/*****************************************
*             common settings            *
*****************************************/

.btns {
	text-align: center;
}

.btn {
	display: inline-block;
	color: #ffffff;
	font-size: 50px;
	line-height: 1;
	letter-spacing: 5px;
	margin-top: 40px;
	padding: 45px 100px;
	border-radius: 70px;
	background: #298d2d;
}

.btn.disable {
	pointer-events: none;
}

.clearFix:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

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

.pos-a {
	position: absolute;
	-webkit-transition: opacity .75s ease-out, -webkit-transform .75s ease-out, filter .75s ease-out; /* , filter .75s ease-out */
	-moz-transition: opacity .75s ease-out, -moz-transform .75s ease-out, filter .75s ease-out; /* , filter .75s ease-out */
	-ms-transition: opacity .75s ease-out, -ms-transform .75s ease-out, filter .75s ease-out; /* , filter .75s ease-out */
	-o-transition: opacity .75s ease-out, -o-transform .75s ease-out, filter .75s ease-out; /* , filter .75s ease-out */
	transition: opacity .75s ease-out, transform .75s ease-out, filter .75s ease-out; /* , filter .75s ease-out */
	opacity: 1;
	/* filter: blur(0); */
}

.transition {
	-webkit-transform: translateY(70px); /* scale(1.05)  */
	-moz-transform: translateY(70px); /* scale(1.05)  */
	-ms-transform: translateY(70px); /* scale(1.05)  */
	-o-transform: translateY(70px); /* scale(1.05)  */
	transform: translateY(70px); /* scale(1.05)  */
	opacity: 0;
}

.title.transition {
	/* filter: blur(10px); */
}

.textHide {font-size: 0; text-indent: -5000px;}