@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
    position:relative;
}

body {
    min-width: 1100px;
}
html {
font-size: 62.5%;
}
body {
font-size:13px;
font-size:1.3rem;
font-family:Avenir, Arial, 'Meiryo', "儷黑 Pro", "LiHei Pro", "微軟正黑體", "新細明體", sans-serif;}

.hidden {opacity:0;}
.visible{opacity:1;}

.align-center      {text-align: center}
.align-right       {text-align: right}
.align-left        {text-align: left}


/*去除連結虛線框*/
a		{blr:expression(this.onFocus=this.blur());}
a:focus {-moz-outline-style: none; } 


/*font*/
@font-face {
 font-family:Avenir;
 src: url("../font/AvenirLTStd-Light.otf") format("opentype");
 font-weight:200;
}
@font-face {
 font-family:Avenir;
 src: url("../font/AvenirLTStd-Book.otf") format("opentype");
 font-weight:300;
}
@font-face {
 font-family:Avenir;
 src: url("../font/AvenirLTStd-Roman.otf") format("opentype");
 font-weight:normal;
}
@font-face {
 font-family:Avenir;
 src: url("../font/AvenirLTStd-Medium.otf") format("opentype");
 font-weight:500;
}
@font-face {
 font-family:Avenir;
 src: url("../font/AvenirLTStd-Heavy.otf") format("opentype");
 font-weight:bold;
}
@font-face {
 font-family:Avenir;
 src: url("../font/AvenirLTStd-Black.otf") format("opentype");
 font-weight:900;
}

.button                 {display: inline-block; text-align: center; line-height: 1; cursor: pointer; -webkit-appearance: none; transition:background-color 0.25s ease-out, color 0.25s ease-out; vertical-align: middle; border-radius: 0; padding: 0.8em 2em; margin: 0 0 1rem 0; font-size: 0.9rem; background-color:#52c3f1; color: #fff; font-size: 1.6rem; letter-spacing: 0.1rem; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background: #fff; color:#000;  border: 2px solid #000; }
.button:hover,
.button:focus           {transition:background-color 0.15s ease-out, color 0.15s ease-out; color:#000;  background:#eee; cursor: pointer;}
.button:active          {top:1px;}

/*Fundation*/
.row.expanded > .row                {max-width:1100px; }
.row.expanded > .row  > .columns    {padding: 8rem 0 2rem 0;}

.logo.show-for-small-only       {display: block; width: 151px; height: 46px; background: url("../images/logo4.png"); background-size: 151px; margin: 0.5rem auto;}

.off-canvas-content                     {background: #fff; box-shadow:none; width: 100%; }
.is-off-canvas-open .off-canvas-content {-webkit-box-shadow:0px 5px 20px rgba(0,0,0,0.3); -moz-box-shadow:0px 5px 20px rgba(0,0,0,0.3); box-shadow:0px 5px 20px rgba(0,0,0,0.3);} 
.off-canvas                         	{background: #333;}

.mobile-navi                                {margin-top: 3rem;}
.mobile-navi li                             {list-style: none;}
.mobile-navi li a:link,
.mobile-navi li a:visited                   {color:#999; font-size:15px; font-size: 1.5rem; letter-spacing: 0.05rem; padding:1.5rem 1rem; display: block; }
.mobile-navi li a:hover                     {color:#fff; }
.mobile-navi li.has-submenu                 {}
.mobile-navi li.has-submenu a               {color:#666; font-size:16px; font-size: 1.6rem;  padding:1rem 1rem;}
.mobile-navi li.has-submenu ul              {background: #fff; margin: 0;}
.mobile-navi li.has-submenu ul li           {}
.mobile-navi li.has-submenu ul li a:link,
.mobile-navi li.has-submenu ul li a:visited {text-indent: 1rem; color:#333;font-size:18px; font-size: 1.8rem; padding:1rem 1rem;}
.mobile-navi li.has-submenu ul li a:hover   {color:#5fb14d;}

.mobile-navi .accordion-title                        {background: #f3f3f3;}
.mobile-navi .accordion-title:hover, 
.mobile-navi .accordion-title:focus                  {background: #f3f3f3;}
.mobile-navi .accordion-title::before {display: block; content: ''; background:url("../images/icon-arrow-2@2x.png")no-repeat; height:13px; width:6px; background-size:6px; position: absolute; right: 1rem; top: 50%; margin-top: -5px;}
.mobile-navi .is-active > .accordion-title::before {display: block; content: ''; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.mobile-navi .is-active > .accordion-title           {border:0;}


.intro-column                   {text-align: center;}
.intro-column .intro-bg         {background:url("../images/intro_friends.jpg") no-repeat center center; height:650px; width: 459px; width: 1000px; margin: auto; }
.intro-column .intro-bg a           {display: block;  position: absolute; z-index: 99; }
.intro-column a.intro-1             {width:100px; height: 260px; top:220px; right: 330px;}
.intro-column a.intro-2             {width:100px; height: 380px; top:100px; right: 430px;}
.intro-column a.intro-3             {width:100px; height: 100px; top:160px; right: 590px;}
.intro-column a.intro-4             {width:200px; height: 160px; top:260px; right: 530px;}
.intro-column a.intro-5             {width:300px; height: 200px; top:430px; right: 350px;}
.intro-column .show-intro           { position: absolute; padding: 2rem 0 2rem 5rem; text-align: left; display: none;}
.intro-column .show-intro .title    {color: #f36; font-size: 1.7rem; font-weight: bold; margin-bottom: 1rem;}
.intro-column .show-intro li        {list-style: none; color: #fff; text-align: left;font-size: 1.3rem; line-height: 200%; letter-spacing: 0.1rem; }
.intro-column .show-intro li span   {text-decoration: line-through; }
.intro-column .show-intro.show      {display:block; }

.show-intro-1   {background: url("../images/intro_paper_5.jpg") no-repeat; width: 259px; height: 290px; top: 20rem;  background-size: 230px;  right: 2rem;}
.show-intro-1:before   {display: block; content: ''; background: url("../images/intro_dragon.gif") no-repeat; width: 381px; height: 448px; background-size: 200px; top: -20rem; right: -20rem; position: absolute;}
.show-intro-2   {background: url("../images/intro_paper_2.jpg") no-repeat; width: 267px; height: 255px; background-size: 250px; top: 2rem; right: 1rem;}
.show-intro-3   {background: url("../images/intro_paper_4.jpg") no-repeat; width: 269px; height: 274px; background-size: 220px; top: 5rem; left: 2rem;} 
.show-intro-4   {background: url("../images/intro_paper_5.jpg") no-repeat; width: 259px; height: 290px; background-size: 220px; top: 22rem; left: 3rem; padding-left:4rem!important;} 
.show-intro-5   {background: url("../images/intro_paper_2.jpg") no-repeat; width: 267px; height: 255px;  background-size: 250px; top: 32rem; left: 6rem; padding-left:4rem!important;} 

.intro-enter    {background: url("../images/intro_enter.jpg") no-repeat; width:142px; height:82px; position: absolute; right:10rem; bottom:5rem;}
.intro-enter:hover    {bottom:5.1rem;}

#section-footer                 {text-align: center; padding-bottom: 5rem; margin-top: 2rem;}
#section-footer p               {font-size: 1.2rem; letter-spacing: 0.2rem; color: #666; font-family: sans-serif}
#section-footer p a             {color: #666; letter-spacing:0.1rem;  padding: 0; }
#section-footer p a:hover       {color: #666; text-decoration: underline;}


#section-index                  {padding: 2rem 0; }
#section-index .left-column           {text-align:center; padding-top: 15rem;}
#section-index .left-column .logo     {margin-bottom: 2rem; position: absolute;  top:0; left: 0; right: 0; margin: auto;}
#section-index .news-column     {}
#section-index .news-column .news     {margin: 2rem 0; padding-left: 2rem; }
#section-index .news-column .news li  {margin: 1rem 0;}
#section-index .news-column .news li span  {display: block; font-size:12px; font-size:1.2rem; }
#section-index .body-column     {}
.oyster-body                   {background: url("../images/oysert-body.jpg") no-repeat; width: 538px; height: 477px;}


.icon-oyster-body   {fill: darken(#f33, 50%); fill:transparent; width:472px; height: 402px; margin:15px 40px;}
.oyster-gif         {display: block; background: url("../images/oyster-meat.png"); width: 351px; height: 286px; position: absolute; left: 80px; top:50px; display: none; }
.oyster-gif:before  {display: block; background: url("../images/oyster-meatblur.png"); width: 350px; height: 291px; position: absolute; left: 0px; top:0px; content: ''; z-index: 99; }
.oyster-gif.show        {animation: gifEffect 0.17s; -moz-animation: gifEffect 0.17s; -webkit-animation: gifEffect 0.17s;   -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; display:block; animation-iteration-count:infinite;}

@keyframes gifEffect{
  0%    {opacity:0; }
  50%    {opacity:0.7;}
  100%  {opacity:0; } 
}
@-moz-keyframes gifEffect{
  0%    {opacity:0; }
  50%    {opacity:0.7;}
  100%  {opacity:0; } 
}
@-webkit-keyframes gifEffect{
  0%    {opacity:0; }
  50%    {opacity:0.7;}
  100%  {opacity:0; }  
}

.oyster-meat        {fill:transparent; position: absolute; display: inline-block; z-index: 9;}
.oyster-meat-h-1    {width: 342px; height: 278px; top: 52px; right: 102px;}
.oyster-meat-h-2    {width: 158px; height: 138px; top: 110px; right: 300px;}
.oyster-meat-h-3    {width: 72px; height: 66px; top: 195px; right: 270px;}
.oyster-meat-h-4    {width: 95px; height: 80px; top: 180px; right: 190px;}
.oyster-meat-h-5    {width: 162px; height: 72px; top: 110px; right: 180px;}
.oyster-meat-h-6    {width: 76px; height: 74px; top: 230px; right: 130px;}

.meat-part          {position: absolute; display:none; z-index: 9; }
.meat-part.show     {display: block;}
.meat-part.part-1   {background: url("../images/oyster-meat-1.png"); width: 513px; height: 383px; top:-50px; right:-78px;}
.meat-part.part-2   {background: url("../images/oyster-meat-2.png"); width: 326px; height: 291px; top:-35px; right:280px;}
.meat-part.part-3   {background: url("../images/oyster-meat-3.png"); width: 305px; height: 278px; top:200px; right:260px;}
.meat-part.part-4   {background: url("../images/oyster-meat-4.png"); width: 207px; height: 331px; top:180px; right:78px;}
.meat-part.part-5   {background: url("../images/oyster-meat-5.png"); width: 307px; height: 270px;top:-82px; right:175px;}
.meat-part.part-6   {background: url("../images/oyster-meat-6.png"); width: 287px; height: 241px; top:240px; right:-80px;}

#section-heart      {text-align: center; background: url("../images/about-bg.jpg") center; padding-top: 8rem;}
#section-heart .oyster-heart      {top: -10rem;}
.oyster-heart       {background: url("../images/oysert-body-meat.png") no-repeat;  margin: auto; z-index: 1; }
.heart-deco         {width: 100%;  position: absolute; top: 0;}
.heart-deco img     {position: absolute;}
.heart-logo         {left: 0px; top: -110px; width: 260px}
.heart-deco-1       {left: -50px; top: -0px; width: 100px;}
.heart-deco-2       {left: 0px; top: 210px; width: 130px;}
.heart-deco-3       {left: 0px; top: 340px; }
.heart-deco-4       {left: -30px; top: 400px; z-index: 9; }
.heart-deco-5       {left: 60px; top: 430px; }
.heart-deco-6       {left: 380px; top: 330px; width: 130px;  z-index: 9;}
.heart-deco-7       {left: 420px; top: 430px; width: 170px;}
.heart-deco-8       {left: 100px; top: 230px; width: 110px;  z-index: 9;}
.heart-deco-9       {left: 200px; top: 280px;  z-index: 9;}
.heart-deco-10      {right: 300px; top: 520px;}
.heart-deco-11      {right:50px; top: 220px;}
.heart-deco-12      {right:50px; top: 400px;}

.heart-desc         {position:absolute; right: 50px; top: -70px; width: 350px; text-align: left; z-index: 9;}
.heart-desc p       {font-size: 1.2rem; line-height: 180%; margin: 0.5rem 0; padding:1px;}
.heart-desc p:nth-child(1)       {margin-left: -5rem; width: 260px; }
.heart-desc p:nth-child(2)       {margin-left: 2rem; color:purple}
.heart-desc p:nth-child(3)       {margin-left: 4rem; width: 350px; }
.heart-desc p:nth-child(4)       {margin-left: 4rem; width: 200px; color:purple }
.heart-desc p:nth-child(5)       {margin-left: -8rem; width: 220px; color:purple }
.heart-desc p:nth-child(6)       {margin-left: -8rem;width: 220px; background: #fff;}

#section-palpus     {text-align: center; background: url("../images/palpus-bg.jpg") no-repeat center 6rem;}
#section-palpus .right-column     {height: 600px; padding-top: 12rem;}
.oyster-palpus      {background: url("../images/oysert-body-meat.png") no-repeat;  margin: auto; top:43px; left: 20px;}
.img-chopsticks             {outline: none;}
.img-chopsticks:hover     {cursor:pointer!important; outline: none;}
.img-eat            {position: absolute; top:400px; left: 0; right: 0; margin: auto; outline: none;}
.img-eat.show       {display: block;}
.img-labismcorner       {position: absolute; top: -4rem; right: 0; width: 360px; z-index: 9; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; outline: none;}
.img-labismcorner:hover {position: absolute; top: -2rem; right: 0; cursor:pointer!important;
-moz-transform-origin:right bottom;
-moz-transform:rotate(-3deg);
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-3deg);
-ms-transform-origin:right bottom;
-ms-transform:rotate(-3deg);
transform-origin:right bottom;
transform:rotate(-3deg);}
.img-oil        {width: 170px; position: absolute; top: 150px; right:50px; z-index: 9; outline: none;}
.img-oil2       {width: 170px; position: absolute; top: 340px; right:50px; z-index: 9; outline: none;}
.img-lemon      {width: 140px; position: absolute; bottom: -50px; right: 60px; outline: none;}
.img-newspaper  {position: absolute; bottom: 40px; right: 80px; display: none}
.img-newspaper.show  {display:block;}
.img-oil-txt         {position: absolute; display:block; top: 325px; right: 25px;  display: none; }
.img-oil-txt.show       {display:block;}
.img-oil-txt2           {position: absolute; display:block; top: 125px; right: 25px;  display: none; }
.img-oil-txt2.show       {display:block;}


#section-stomath                    {text-align: center;}
#section-stomath > .row > .columns  {padding: 12rem 0 8rem 0;}

.roll-column                {position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 400px;}
.roll-column.bottom         {position: absolute; top:auto; bottom:0; left: 0; overflow: hidden; width: 100%; height: 500px;}
.roll-column .roll-head     {background:url("../images/roll01.png") no-repeat; width: 1410px; height: 328px; position: absolute; top: -250px; left: 150px;
-moz-transform-origin:right bottom;
-moz-transform:rotate(15deg);
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(15deg);
-ms-transform-origin:right bottom;
-ms-transform:rotate(15deg);
transform-origin:left top;
transform:rotate(15deg);}
.roll-column .roll-body     {background:url("../images/roll02.png") no-repeat; width: 1100px; height: 328px;  position: absolute; left:200px; top: -260px;  
-moz-transform-origin:right bottom;
-moz-transform:rotate(15deg);
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(15deg);
-ms-transform-origin:right bottom;
-ms-transform:rotate(15deg);
transform-origin:left top;
transform:rotate(15deg);}

.roll-column.bottom .roll-head    {top:210px; left: 300px; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); transform:rotate(30deg);}
.roll-column.bottom .roll-body    {left:750px; top: 800px; -moz-transform:rotate(210deg); -webkit-transform:rotate(210deg); -ms-transform:rotate(210deg); transform:rotate(210deg);}

.roll-column.top .roll-body        {animation: rollEffect 1s; -moz-animation: rollEffect 1s; -webkit-animation: rollEffect 0.8s;   -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}

.roll-column.bottom .roll-body     {animation: rollEffect2 1s; -moz-animation: rollEffect2 1s; -webkit-animation: rollEffect2 1s;   -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; -webkit-animation-delay: 0.7s; animation-delay: 0.7s;}

@keyframes rollffect{
  0%    {left:200px; top: -260px}
  100%  {left:1000px;top: -60px;}  
}
@-moz-keyframes rollEffect{
  0%    {left:200px; top: -260px}
  100%  {left:1000px;top: -60px;} 
}
@-webkit-keyframes rollEffect{
  0%    {left:200px; top: -260px}
  100%  {left:1000px;top: -50px;}  
}
@keyframes rollffect2{
  0%    {left:750px; top: 720px;}
  100%  {left:200px; top: 400px;}  
}
@-moz-keyframes rollEffect2{
  0%    {left:750px; top: 720px;}
  100%  {left:200px; top: 400px;}  
}
@-webkit-keyframes rollEffect2{
  0%    {left:750px; top: 800px;}
  100%  {left:200px; top: 480px;}  
}

.title_photo    {display: block; width:380px; height: 174px; background: url("../images/title_photography.png") no-repeat; position: absolute; right: 140px; top:0px; z-index: 9999; animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s;   -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; -webkit-animation-delay: 1s; animation-delay: 1s; opacity:0 ; cursor: pointer;}
.title_gallary    {display: block; width:363px; height: 180px; background: url("../images/title_gallary.png") no-repeat; position: absolute; left: 200px; bottom:0px; z-index: 9999;  animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s;   -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; opacity:0;  cursor: pointer;}
.title_photo:hover ,
.title_gallaey:hover    {opacity: 0.5; }
.title_photo:active     {top:2px;}
.title_gallary:active   {bottom:-2px}
@keyframes showEffect{
  0%    {opacity:0}
  100%  {opacity:1}
}
@-moz-keyframes showEffect{
  0%    {opacity:0}
  100%  {opacity:1}
}
@-webkit-keyframes showEffect{
  0%    {opacity:0}
  100%  {opacity:1}  
}

.gallary                {position: absolute; right: 0; z-index: 99; width: 370px; top: 300px; text-align: left; display: none;}
.gallary.gallary_draw   {top: 260px;}
.gallary.show           {display: block;}
.fotorama-overlay       {margin: auto; position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index:1001; }
.fullscreen,
.fotorama--fullscreen,
.fotorama--fullscreen .fotorama__stage,
.fotorama--fullscreen .fotorama__nav,
.fotorama-overlay     {background-color: #fff; background-color: rgba(255, 255, 255, 0.6);  }
.fotorama__wrap   {width: 30%!important; margin: auto;}
.fotorama--fullscreen .fotorama__stage {border: 0px solid transparent; border-bottom-width: 10px; }
.fotorama__nav-wrap     {}
.fotorama__img          {}
.thumbs > .fotorama   {overflow: visible; }
.thumbs a         {text-decoration: none; display: inline !important; color: #000;}
.thumbs a:hover   {color: #333;}
.thumbs a.switch  {border-bottom: 1px dashed;}
.thumbs img       {width: auto; height: 36px; margin: 4px 2px; }
.thumbs a:hover img {border-color: #00afea;}
.fotorama__stage__frame {text-align: center;}

.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr, 
.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon {opacity: 1;}
.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon:not(:focus) { -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}

/* straight “close” icon instead of “cancel fullscreen” */
.fotorama--fullscreen .fotorama__fullscreen-icon {background-position: -64px 0; }


#section-anus               {}
#section-anus .point        {position: absolute; display: block; outline: none;}
.point-1      {background: url("../images/yellowpoint.jpg") no-repeat; width: 250px; height: 217px; top:330px; left: -50px;  animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ;-webkit-animation-delay: 1s; animation-delay: 1s; }
.point-1:hover      {background: url("../images/yellowpoint-1.jpg"); cursor: pointer;}
.point-2      {background: url("../images/yellowpoint01.jpg") no-repeat; width: 135px; height: 132px; top:200px; left: 100px; animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.point-2:hover      {background: url("../images/yellowpoint01-1.jpg"); cursor: pointer;}
.point-3      {background: url("../images/yellowpoint02.jpg") no-repeat; width: 70px; height: 67px; top: 50px; left: 500px;
animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.point-4      {background: url("../images/yellowpoint03.jpg") no-repeat; width: 108px; height: 106px; top:100px; left: 00px;animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; }
.point-5      {background: url("../images/yellowpoint04.jpg") no-repeat; width: 212px; height: 201px; top:100px; right: 0px; animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.point-5:hover      {background: url("../images/yellowpoint04-2.jpg"); cursor: pointer!important;}
.point-6      {background: url("../images/yellowpoint05.jpg") no-repeat; width: 164px; height: 119px; top:300px; right: 50px; animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; -webkit-animation-delay: 1s; animation-delay: 1s;}
.point-7      {background: url("../images/yellowpoint06.jpg") no-repeat; width: 70px; height: 70px; top:500px; right: 120px; animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; -webkit-animation-delay: 1.1s; animation-delay: 1.1s;}
.point-8      {background: url("../images/yellowpoint07.jpg") no-repeat; width: 93px; height: 87px; top:400px; left: 320px; animation: showEffect 0s; -moz-animation: showEffect 0s; -webkit-animation: showEffect 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-iteration-count:1; opacity:0 ; -webkit-animation-delay: 1.2s; animation-delay: 1.2s;}



/*article*/
.article		{padding: 5rem 1rem;}
.article h2		{font-size:30px; font-size:3.0rem; color:#1aa59a; font-weight: bold; margin-bottom: 1rem;}
.article h3		{font-size:22px; font-size:2.2rem; font-weight: bold;  margin-bottom: 0.5rem;}
.article h4		{}
.article p		{font-size:13px; font-size:1.3rem; line-height: 120%;}
.article ul		{margin-left: 2rem;}
.article ul li	{font-size:16px; font-size:1.6rem; margin-bottom: 0.5rem;}
.article ul li b{font-weight: bold;}



.social				{text-align: center; margin: 3rem 0;}
.social a:link,
.social a:visited	{display: inline-block; width:42px; height: 42px; background-image: url("../images/social-icon@2x.png"); background-repeat: no-repeat; background-size:42px; margin: 0 0.5rem;  }
.social a:hover		{filter:alpha(opacity=80);opacity:0.8;zoom:1;}
.social a:active	{top:1px;}
.social a#twitter	{background-position: 0 0;}
.social a#facebook	{background-position: 0 -42px;}
.social a#linkedin	{background-position: 0 -84px;}
.social a#youtube	{background-position: 0 -126px;}
.social a#angellist	{background-position: 0 -168px;}
.social a#instagram	{background-position: 0 -210px;}
.social a#indiegogo	{background-position: 0 -252px;}



/*reveal*/
.reveal-overlay             {background-color: rgba(255, 255, 255, 0.2); z-index: 99999;}
.reveal                     {text-align: center; outline: none; padding: 4rem 2rem 2rem 1rem;}
.reveal .inner              {}
.reveal .inner p            {font-size: 15px; font-size:1.5rem; line-height: 200%;}
.reveal-overlay             {background-color: rgba(0, 0, 0, 0.3); }
.reveal.msg                 {background: rgba(0, 0, 0, 0.7); width:280px; padding:2rem 3rem; outline:inherit; border:0; -webkit-border-radius: 2px; -moz-border-radius: 2px;  border-radius: 2px;  text-align: center; }
.reveal.msg p               {color:#fff; font-size: 16px; font-size:1.6rem; line-height: 180%;}


#eat-pop        {background: transparent; border: 0; width: 300px;}
#labism-pop     {background: transparent; border: 0; width: 800px;}
#labism2-pop     {background: transparent; border: 0; width: 600px;}
#shop-pop        {background: transparent; border: 0; width: 324px;}

.close-button               {outline: none;}
.close-button span          {color:#fff; outline: none;}
.close-button:hover span    {color:#fff;}

.reveal.song                {}
.reveal.song .title         {font-size: 2.2rem; text-align: left}
.reveal.song .inner         {}
.reveal.song .inner .article{text-align: left; padding: 2rem;}
.reveal.song span           {color:#333;}
.reveal.song:hover span     {color:#000;}

.btn-toggle-menu:link,
.btn-toggle-menu:visited    {background: url("../images/icon-toggle-menu@2x.png") no-repeat; width: 24px; height: 20px; display: inline-block; background-size: 24px; position: absolute; z-index: 9; left:2rem; top:4rem; bottom:0; margin: auto;  filter:alpha(opacity=0.8);opacity:0.8;zoom:1;}
.btn-toggle-menu:hover      {}
.btn-toggle-menu:active     {}


/**************************************** Small 480 less ****************************************/
@media screen and (max-width: 480px) {}

/**************************************** Small 640 less ****************************************/
@media screen and (max-width: 39.9375em) {
    body                            {min-width:inherit; width: 100%; overflow: hidden; -webkit-overflow-scrolling:touch}
    .off-canvas-content             {background: #fff; box-shadow:none; width: 100%; overflow: hidden; -webkit-overflow-scrolling:touch }
    .mobile-header                  {background: #fff; padding: 0.5rem; z-index: 99;  text-align: center;position: fixed; top: 0; left: 0; width: 100%; min-width: inherit; z-index: 99999;}
    .mobile-header.fixedTop         {border-bottom: 1px solid #eee;}
    .btn-toggle-menu:link, 
    .btn-toggle-menu:visited            {left: 2rem; top: 0.5rem; }
     .row                               {max-width:none;}
    .row.expanded                       {min-width: 1100px; min-width: 100%; overflow:auto; }
    .row.expanded > .row                {min-width: 1100px;}
    .row.expanded > .row  > .columns    {padding: 12rem 0 2rem 0;}
    #index .row.expanded                {min-width:inherit; width: 100%; overflow: inherit;}
    #index .row.expanded > .row         {min-width:inherit; width: 100%;}
    .intro-column .intro-bg             {background-size: 300px; width: 100%; height:500px; background-position: top center;}
    .intro-enter                        {bottom: 0; right: 0; left: 0; margin: auto; background: url("../images/intro_enter@2x.png") no-repeat; width:125px; height:50px; background-size: 125px;}
    .intro-enter:hover                  {bottom:0rem;}
    
    #section-stomath    {padding-top: 5rem;}
    #section-heart      {padding-top: 16rem;}
    #section-footer     {width: 100%; min-width: inherit;}
    #section-palpus     {background:none; padding-top: 5rem;}
    #section-palpus > .row     {background: url(../images/palpus-bg.jpg) no-repeat center 10rem;}
    #section-anus               {padding-top: 5rem}

    .title_photo                {animation:none; -moz-animation:none; -webkit-animation: showEffect 0s;  opacity:1;  }
    .title_gallary              {}
    .roll-column .roll-head     {}
    .roll-column .roll-body     {}
    .roll-column.top .roll-body        {animation:none; -moz-animation:none; -webkit-animation:none;left:1000px;top: -60px;}
    .roll-column.bottom .roll-body     {animation:none; -moz-animation:none; -webkit-animation:none;left:200px;top:460px;}

    .img-oil-txt,
    .img-oil-txt2,
    .img-lemon,
    .img-eat,
    .img-newspaper  {display: block;}
    
    .point-1      {background: url("../images/yellowpoint-1.jpg"); cursor: pointer;}
    .point-2      {background: url("../images/yellowpoint01-1.jpg"); cursor: pointer;}
    .point-5      {background: url("../images/yellowpoint04-2.jpg"); cursor: pointer!important;}
    
    .fotorama__wrap   {width: 90%!important; }
    
    #labism-pop,
    #labism2-pop,
    #eat-pop,
    #shop-pop    {padding-top: 12rem;  width: 100%;}


}


/**************************************** Medium 640 up ****************************************/
@media screen and (min-width: 40em) {}

/**************************************** Medium 640-1024 **************************************/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/**************************************** Large 1024 up ****************************************/
@media screen and (min-width: 64em) {}

/****************************************  Large 1024-1200 *************************************/
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}