body {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'Microsoft JhengHei', sans-serif
}
.page__operation{
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.page__button{  
  /* background-color:rgba(255, 255, 255, 0.1); */
  background-color:rgba(0,0,0,0);
  border:0;
  padding:0;
  height:40px;
  width:60px;  
  outline: none;
  text-shadow: 0 0 4px #000;
  color: #ffffff;
  filter: drop-shadow(0px 0px 1px rgba(0,0,0,1));
}
.page__button:disabled{filter:none;}

.page__button svg{fill:#ffffff;}
.page__button:disabled svg{fill:rgba(0,0,0,0);}
.page__counter{
  z-index: 999;
  position: fixed;
  width: 60px;
  color: #ffffff;
  bottom: 0;
  right: 0;
  padding: 4px;
  box-sizing: border-box;
  text-shadow: 0 0 2px #000000;
  text-align: right;
}

.page {
  /* background-color: #eeeeee; */
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}

.page__container{
  width: 320px;
  height: 480px;
  overflow: hidden;
  /*用以標示區塊用*/
  /* background-color:rgba(0,0,0,0.05); */
}
.page__title{
  font-weight: 100;
  font-size:24px;
  line-height: 60px;
  height:60px;
  padding:0;
  margin:0;
  text-align: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.page__content{width:320px;height:420px;overflow: hidden;}
.page__content--link{text-decoration: none;display: block;color:inherit;}
.page__content--image{height: 160px; display: block;margin:auto;}
.page__content--text{margin:0px;padding:0 16px; text-indent: 2em;text-align:justify;}

/* .page__landing{background-color: #ffb9b9;}
.page__product{background-color: #ffd9b9;}
.page__group{background-color: #feffb9;}
.page__index{background-color: #bdffb9;}
.page__photo{background-color: #b9fff5;}
.page__article{background-color: #b9cbff;}
.page__list{background-color: #dab9ff;}
.page__other{background-color: #c3c3c3;}
.page__introduction{background-color: #ff3434;}
.page__insert{background-color: #34ffd3;} */

/*landing*/
.page__landing__block {
  height: 420px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.page__landing__block:nth-child(1) {height: 60px;}
.page__landing__block:nth-child(2) {height: 60px;}
.page__landing__block:nth-child(3) {height: 240px;}
.page__landing__block:nth-child(4) {height: 60px;}

.page__landing__content--image{
  height: 228px;
  width: 228px;
  margin:auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page__landing__content--text{margin:0px; text-align:center;white-space: pre-wrap;/*遇到斷行字元*/}

.page__landing__block:nth-child(1) .page__landing__content--image{height:0;width:0;overflow: hidden;}
.page__landing__block:nth-child(1) .page__landing__content--text{height:60px;}

.page__landing__block:nth-child(2) .page__landing__content--image{height:0;width:0;overflow: hidden;}
.page__landing__block:nth-child(2) .page__landing__content--text{height:60px;}

.page__landing__block:nth-child(3) .page__landing__content--image{height:240px;width:240px;}
.page__landing__block:nth-child(3) .page__landing__content--text{height:0;width:0;overflow: hidden;}

.page__landing__block:nth-child(4) .page__landing__content--image{height:0px;width:0px;overflow: hidden;}
.page__landing__block:nth-child(4) .page__landing__content--text{height:60px;}



/*product*/
.page__product__block {height: 420px;}
.page__product__content--image{
  width:288px;
  height: 288px;
  display: block;
  margin:auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;}
.page__product__content--text{margin:0px; text-indent: 2em;text-align:justify;padding:16px;}

/*article*/
.page__article .page__content{height:420px;overflow: hidden;}
.page__article__content--text{margin:0px;padding:0 16px 16px 16px; text-indent: 2em;text-align:justify;}

/*photo*/
.page__photo__content--image{
  width:288px;
  height: 404px;
  display: block;
  margin:auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*insert*/
.page__insert{
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}

.page__insert .page__title{height: 0;width:0;overflow: hidden;}
.page__insert .page__content{width:320px;height:480px;}
.page__insert__block{width:320px;height:480px;}
.page__insert__content--image{
  width:320px;
  height: 480px;
  display: block;
  margin:auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page__insert__content--text{height: 0;width:0;overflow: hidden;}


/*index*/
.page__index__block{height:40px; width:288px;padding:0 16px 8px 16px;}
.page__index__content--image{
  float:left;
  width: 40px;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;}
.page__index__content--text{float:left; margin:0 0 0 16px;  width:232px;line-height:40px;}


/*index 6*/
.page__index6__block{height: 70px;width: 320px;padding: 0;}
.page__index6__content--image{
  float:left;
  width: 70px;
  height: 70px;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;}
.page__index6__content--text{float:left; margin:0 0 0 16px;  width:234px;line-height:40px;}


/*group*/
.page__group__block{height:132px;width: 160px; float:left;}
.page__group__content--image{
  width: 108px;
  height: 108px;
  margin:auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;}
.page__group__content--text{ width: 100%; margin:0;padding:0;text-align: center;}

/*list*/
.page__list__content--text{line-height: 32px;margin:0;padding:0;}
.page__list .page__content{margin:0;}

/*no Title*/
.page__no_title__block{height:40px; width:288px;padding:0 16px 8px 16px;}
.page__no_title .page__title{height:0; width:0;padding:0;margin:0;overflow: hidden;}
.page__no_title .page__content{height:480px;width:320px;}
.page__no_title__content--image{height: 160px; display: block;margin:auto;}
.page__no_title__content--text{margin:0px;padding:0 16px; text-indent: 2em;text-align:justify;}

/*one block*/
.page__one_block__block{height:420px; width:320px;}
.page__one_block .page__content{width:320px;height:420px;}
.page__one_block__content--image{width:320px;height:420px;background-size: contain;  background-position: center;}
.page__one_block__content--text{height:0;width:0;margin:0;padding:0;overflow: hidden;}

/*animation*/
.hide{
  /*移除後會自動撥放動畫*/
  display: none;
}

.animation__from__right{  animation: from_right 1s 1;}
.animation__from__left{animation: from__left 1s 1;}
.animation__from__top{animation: from__top 1s 1;}
.animation__from__bottom{animation: from__bottom 1s 1;}


.animation__clockwise{animation: clockwise 1s 1;}
.animation__counterclockwise{animation: counterclockwise 1s 1;}
.animation__clockwise__back{animation: clockwise__back 1s 1;}
.animation__counterclockwise__back{animation: counterclockwise__back 1s 1;}

.animation__zoom__out{animation: zoom__out 1s 1;}
.animation__zoom__in{animation: zoom__in 2s 1;}

.animation__fade__in{animation: fade__in 1s 1;}
.animation__fade__in__slow{animation: fade__in 2s 1;}
.animation__fade__in__fast{animation: fade__in 0.3s 1;}



/*move*/
@keyframes from_right {
  0%   {opacity: 0;transform: translate(120px, 0);}
  /* 50%  {transform: rotateZ(15deg);} */
  100% {opacity: 1;transform: translate(0,0);}
}

@keyframes from__left {
  0%   {opacity: 0;transform: translate(-120px, 0);}
  /* 50%  {transform: rotateZ(15deg);} */
  100% {opacity: 1;transform: translate(0,0);}
}

@keyframes from__top {
  0%   {opacity: 0;transform: translate(0, -120px);}
  /* 50%  {transform: rotateZ(15deg);} */
  100% {opacity: 1;transform: translate(0,0);}
}

@keyframes from__bottom {
  0%   {opacity: 0;transform: translate(0, 120px);}
  /* 50%  {transform: rotateZ(15deg);} */
  100% {opacity: 1;transform: translate(0, 0);}
}


/*rotate*/
@keyframes clockwise__back {
  0%   {opacity: 0; }
  50%  {transform: rotateZ(360deg);}
  100% {opacity: 1; }
}
@keyframes counterclockwise__back {
  0%   {opacity: 0; }
  50%  {transform: rotateZ(-360deg);}
  100% {opacity: 1; }
}
@keyframes clockwise {
  0%   {opacity: 0; transform: rotateZ(0deg);}
  100% {opacity: 1; transform: rotateZ(360deg);}
}
@keyframes counterclockwise {
  0%   {opacity: 0; transform: rotateZ(0deg);}
  100% {opacity: 1; transform: rotateZ(-360deg);}
}

@keyframes zoom__in {
  0%   {transform: scale(0, 0); }
  100% {transform: scale(1, 1); }
}
@keyframes zoom__out {
  0%   {transform: scale(2, 2); }
  100% {transform: scale(1, 1); }
}


/*opacity*/
@keyframes fade__in {
  0%   {opacity: 0; }
  100% {opacity: 1; }
}