@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  
  /* make it look decent enough */
  /*background: #232323;*/
  /*color: #cdcdcd;*/
  /*font-family: "Avenir Next", "Avenir", sans-serif;*/
  color: #333;
  background: #e0e2da;
  font-family: source-han-serif-tc,serif;
  font-weight: 400;
  font-style: normal;
}

div.image {
  line-height: 0;
}

a {
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

/*a:hover {
  color: tomato;
}*/

p {
  margin-bottom: 1em;
}

section {
  width: 100%;
  overflow: hidden;
}

section .image {
  position: relative;
/*	background: #f0ff9b;*/
/*	background: linear-gradient(to right, #90ab66 0%, #f0ff9b 100%);*/
}

section .image .watermark {
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 1em 2em;
  position: absolute;
  right: 0;
  bottom: 20%;
  font-size: 2.6em;
}

section .logo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999999;
}

section .logo img {
  height: 3vw;
	max-height: 40px;
	width: auto;
}

#sec01 .fade-in {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
	width: 100%;
}

#sec01 .image {
	padding-bottom: 56.25%;
	overflow: hidden;
}

#sec07 .image .watermark {
  right: 3.6em;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#wrapper {
  text-align: center;
}

.inner {
  max-width: 1152px;
  margin: 0 auto;
  opacity: 0;
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 30px;
  /*left: 200px;*/
  right: 20px;
  
  z-index: 99999;
  
  -webkit-user-select: none;
  user-select: none;
	background: rgba(255, 255, 255, .5);
	padding: 10px;
}

#menuToggle input
{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
	
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 50px; /*33px;*/
  height: 6px; /*4px;*/
  margin-bottom: 7px;
  position: relative;
  
  /*background: #cdcdcd;*/
  background: #454545;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:last-child {
	margin-bottom: 0;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-10px, -25px);
  /*transform: rotate(45deg) translate(-2px, -1px);*/
  /*background: #232323;*/
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(-6px, 20px);
  /*transform: rotate(-45deg) translate(0, -1px);*/
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  /*width: 300px;*/
  width: 100px;
  /*margin: 10px -30px 0 -60px;*/
  margin: 10px 0 0 -47px;
  padding: 10px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

  box-sizing: border-box;
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

#navigation {
  position: fixed;
  /*width: 100px;*/
  padding: 0 10px;
  top: 150px;
  right: -290px;
  background: rgba(255,255,255,1);
  /*min-height: 50%;*/
  box-sizing: border-box;
  z-index: 99999;
  text-align: center;
  font-size: 1.2em
}

#navigation li {
  margin: 10px 0;
  padding: 5px 10px;
  cursor: pointer;
}

#navigation li:hover, #navigation li.active {
  background: rgb(94,122,81);
  color: #fff;
}

#navigation .ico {
  width: 50px;
}
.backgroundLight {
/*
	position: relative;
	width: 105%;
	left: -2.5%;
*/
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	animation: backgroundFlash 14s infinite alternate;
    -moz-transform: backgroundFlash 14s infinite alternate;
    -webkit-animation: backgroundFlash 14s infinite alternate;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;

}
.Xfloat {
	position: absolute;
	width: 102%;
	left: -1%;
	transform: translateX(1%);
	animation: Xfloat 14s infinite alternate;
    -moz-transform: Xfloat 14s infinite alternate;
    -webkit-animation: Xfloat 14s infinite alternate;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes Xfloat {
	0% {
		-webkit-transform: translateX(1%);
		-ms-transform: translateX(1%);
		transform: translateX(1%);
	}
	50% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(1%);
		-ms-transform: translateX(1%);
		transform: translateX(1%);
	}
}

@keyframes Xfloat {
	0% {
		-webkit-transform: translateX(1%);
		-ms-transform: translateX(1%);
		transform: translateX(1%);
	}
	50% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(1%);
		-ms-transform: translateX(1%);
		transform: translateX(1%);
	}
}

@-webkit-keyframes backgroundFlash {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes backgroundFlash {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.image img {
  width: 100%;
}

.for-mobile {
  display: none;
}

.title01, .title02 {
  line-height: 1.2;
  font-weight: bold;
}

.row.right {
  text-align: right;
}

#snowflake {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.row.right .title01 {
  text-align: right;
  padding: 0.1em 1em 0.1em 2em; 
}

.inner {
  text-align: left;
  padding-top: 14em;
}

label.title01 {
  font-weight: 600;
  font-size: 2em;
/*  border-bottom: 1px solid rgb(51,51,51);*/
  padding: 0.1em 2em 0.1em 1em;
}

label.title01:before {
	content: '';
	width: 30px;
	height: 30px;
	background: url(image/tea/tea2.png);
	display: inline-block;
	margin: 0 10px;
}

#sec02 label.title01:before {
	display: none;
}

.inner label.title02 {
  color: #497153;
  font-size: 2em;
  border: 0;
  padding: 0 3em;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.descpt {
  text-align: left;
}

.inner .descpt {
  line-height: 2;
  padding: 2em 4.6em;
  font-size: 1.1428em;
}

.inner .descpt p.pd-tb {
  padding-top: 2.5em;
  padding-bottom: 3em;
}

.inner .chart {
  /*width: 720px;*/
  /*height: 720px;*/
  /*box-sizing: border-box;*/
  margin: 0 auto;
  margin-bottom: 6em;
}

.inner .box {
  background: #fff;
  height: 100%;
}

.slider .row {
  background: #fff;
}

#sec02 {
  position: relative;
}

#sec02 .inner {
  color: #fff;
  position: absolute;
  top: 0;
  max-width: unset;
  padding-top: 5em;
  max-width: unset;
  text-align: center;
  width: 100%;
}

#sec02 .inner label.title01 {
  border: 0;
}

#sec02 .inner .descpt {
  max-width: 1152px;
  margin: 0 auto;
}

#sec03 {
  padding-bottom: 4em;
}

#sec03 .row-btn {
	font-size: 1.2em;
	margin: 0 auto 2em auto;
	width: 100%;
}

.note {
  padding: 2em 5.3em;
}

#sec04 .note p {
  margin: 0;
}

#sec04 .image .shift {
  position: absolute;
  top: 0;
  right: 100%;
}

#sec05 .image .shift {
  position: absolute;
  top: 0;
  left: 100%;
}

#sec05 .inner {
  text-align: center;
}

#sec06 {
	background: white;
}

#sec06, #sec08 {
  position: relative;
  /*display: inline-block;*/
  /*max-width: 1152px;*/
}

#sec06 > .row {
  height: calc(100vh - 2px);
}

#sec06 .inner {
  text-align: center;
  padding-top: 4em;
}

#sec06 > .row > .row {
  text-align: right;
}

#sec06 > .row > .row .r-title {
  position: initial;
  display: inline-block;
  margin-bottom: 1em;
}

#sec06 .box img, #sec08 .box img {
  margin-top: 3.6em;
}

#sec06 > .row, #sec08 > .row {
  max-width: 1152px;
  background: #fff;
  margin: 0 auto;
  height: 100%;
}

#sec06 .row .descpt, #sec08 .row .descpt {
  line-height: 2;
  padding: 2.2em 5em;
  font-size: 1.1428em;
}

#sec06 .row-btn {
  font-size: 1.2em;
  margin: 2em auto;
  width: 100%;
}

#sec06 .row .image {
  padding: 2em 10em 0 10em;
}

#sec07 {
  background: rgb(228,222,213);
  position: relative;
  padding-top: 6em;
  padding-bottom: 2em;
  /*padding: 0 0.5em;*/
}

#sec07 .row {
  max-width: 1152px;
  margin: 0 auto;
}

#sec07 .row label.title01 {
  font-weight: 600;
  font-size: 2em;
/*  border-bottom: 1px solid;*/
}

#sec07 .image {
  text-align: center;
  margin: 4em 0;
  padding: 0 9.2em;
}

#sec07 .image img {
    /*width: 100%;*/
}

#sec07 .inner {
  padding: 1em 0.5em 2em 0.5em;
  /*background: #fff;*/
  margin-top: 2em;
}

#sec07 .row-btn {
   font-size: 1.2em;
    margin: 0 auto 2em auto;
    width: 100%;
}

#sec07 .bttn {
  background: rgb(153,137,112);
  display: inline-block;
  /* max-width: 300px;
  margin-right: -150px;
  /*margin: 0 auto;*/
}

.tab {
  width: 100%;
  text-align: center;
  font-size: 2em;
  cursor: pointer;
}

.tab span {
  /*border: 1px solid;*/
  /*border-radius: 8px;*/
  /*padding: 0.1em 1em;*/
  padding: 0.5em 0;
  display: inline-block;
  width: 50%;
}

.tab span.active {
  background: rgb(82,81,76);
  color: #fff;
}

#sec08 {
  margin: 0;
  background: #fff;
  padding: 0.5em;
}

#sec08 > .row {
  padding-top: 3em;
  max-width: 1152px;
  text-align: left;
}

#sec08 .row .r-title {
  position: inherit;
  display: inline-block;
}

#sec08 .row .tab {
  width: calc(100% - 6.9em);
  margin-top: 0.5em;
  margin: 0 auto;
  border-bottom: 3px solid rgb(82,81,76);
}

#sec08 .inner {
  padding-top: 5em;
}

#sec08 .inner label.title02 {
  padding: 0 3.4em 1em 3.4em;
}

#sec08 .row .descpt {
  padding: 2.2em 4.6em;
}

#sec08 .row .image {
  padding: 0 9.8em; 
}

#sec08 .row-btn {
  margin: 0 auto 4em auto;
  text-align: center;
}

#sec08 .row-btn .bttn, #sec09 .row-btn .bttn {
  background: rgb(187,124,99);
  display: inline-block;
  font-size: 1.2em;
}

#sec08 .tab-promo .row-btn .bttn {
  background: rgb(250, 135, 105);
}

#sec08 .tab-edu .row-btn .bttn {
  background: rgb(187,124,99);
}

#sec09 .row-btn .bttn {
  background: rgb(150,89,87);
}

#sec09 {
  text-align: center;
  background: url(https://www.businesstoday.com.tw/lazyweb/project/tea/image/tea/point-bg.jpg);
  /*background: rgb(220,204,204);*/
  padding: 0 0.5em 0.5em 0.5em;
  position: relative;
  background-size: cover;
}

#sec09 > .image:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#sec09 .inner {
  opacity: 1 !important;
}

#sec09 .title03 {
  margin: 1em 0;
  font-size: 2.6em;
  color: rgb(220,204,204);;
  background: #fff;
}

#sec09 > .row {
  display: inline-block;
  padding: 0.5em;
  background: #fff;
  text-align: left;
  margin-bottom: 15px;
  max-width: 800px;

  -webkit-box-shadow: 3px 3px 5px 0px rgba(117,121,113,1);
  -moz-box-shadow: 3px 3px 5px 0px rgba(117,121,113,1);
  box-shadow: 3px 3px 5px 0px rgba(117,121,113,1);
}

#sec09 > .row:last-child {
  /*margin-top: 15px;*/
}

#sec09 > .row > .image {
  width: 20%;
  display: inline-block;
  vertical-align: middle;
}

#sec09 > .row > .inner {
  /*width: calc(60% - 5px);*/
  display: inline-block;
  padding-top: 0;
  vertical-align: middle;
}

#sec09 > .row > .inner .descpt {
  padding: 1em 0 0 0.5em;
  line-height: 1.3;
  font-size: 2em;
}

#sec09 .inner label.title02 {
  padding: 0 0 0 0.5em;
  font-size: 2.6em;
  text-align: left;
}

/*#sec09 .video iframe{
  width: 100%;
  height: calc(100vw - 1em);
}*/

.hide {
  display: none !important;
}

.title03 {
  border: 2px solid #fff;
  padding: 0.5em 1em;
  color: #fff;
  font-weight: bold;
  display: inline-block;
}


.bttn {
  width: 100%;
  background: #5e7a51;
  text-align: center;
  color: #fff;
  padding: 20px 0;

  -webkit-box-shadow: 3px 3px 5px 0px rgba(117,121,113,1);
  -moz-box-shadow: 3px 3px 5px 0px rgba(117,121,113,1);
  box-shadow: 3px 3px 5px 0px rgba(117,121,113,1);
}

.r-title {
  position: absolute;
  right: 0;
  border-bottom: 1px solid;
  z-index: 1;
  font-size: 4em;
  padding: 0.8em 0.5em 0.1em 1.5em;
  font-weight: 500;
}

.bx-wrapper {
  border: 0;
  box-shadow: unset;
  background: unset;
  margin-bottom: 50px;
}

.bx-viewport {
  /*border: 1px solid #a09f9e;*/
}

.bx-wrapper .bx-controls-direction a {
/*  background-size: cover;
  width: 100px;
  height: 100px;
  top: unset;
  margin-top: 0;*/
  bottom: 40%;
}

/*.bx-wrapper .bx-prev {
  background: url(/image/tea/left-triangle.svg);
  opacity: 0.6;
}

.bx-wrapper .bx-next {
  background: url(/image/tea/right-triangle.svg);
  opacity: 0.6;
}*/

/*.bx-wrapper .bx-prev:focus,
.bx-wrapper .bx-next:focus,
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-next:hover {
  background-position: unset;
  opacity: 1;
}*/

.head-ico {
  text-align: center;
  padding-top: 4em;
}

.head-ico .ico {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  /*background: #fff;*/
  display: inline-block;
  margin: 0 10px;
}

.head-ico .ico.active {
  width: 200px;
  height: 200px;
}

.head-ico .ico img {
  width: 100%;
}

/*canvas {
  border: 1px dotted red;
}*/

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

#timeline {
  padding-top: 2em;
}

#timeline .row {
  opacity: 0;
  font-size: 1.2em;
}

#timeline .row:first-child {
  opacity: 1;
}

#timeline .row .date {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  color: rgb(191,159,133);
  position: relative;
}

#timeline .row .date .point {
  width: 10px;
  height: 10px;
  background: rgb(191,159,133);
  border-radius: 50%;
  position: absolute;
  right: -6px;
}

#timeline .row .event {
  width: 80%;
  display: inline-block;
  border-left: 2px solid rgb(191,159,133);
  padding-left: 5%;
  padding-bottom: 5em;
  line-height: 1.3;
  text-align: left;
}

#timeline .row .event .title {
	font-family: "Noto Sans TC";
	font-weight: bold;
	font-size: 1.2em;
	color: #86532a;
	margin-bottom: 0.4em;
}

footer {
  background: rgb(49,49,49);
  color: #fff;
  text-align: center;
  padding: 0 10px 10px 10px;
  line-height: 1.2;
}

footer p {
  margin: 0;
  padding-top: 10px;
}

.scroll-top {
  position: fixed;
  right: 1em;
  bottom: 2em;
  z-index: 99999999;
  width: 50px;
  display: none;
  cursor: pointer;
}

.note {
  color: #999;
  text-align: left;
}

.row-btn {
  max-width: 800px;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.right .title01 {
  padding: 0.1em 1em 0.1em 2em;
}

.fog {
  position: fixed;
  top: 0;
  left: 0;
}

.video {
  width: 80vw;
  height: calc(80vw * 716.8 / 1280);
  margin-bottom: -2px;
}

@media screen and (max-width: 1800px) {
  .video {
    height: calc(80vw * 716.8 / 1280);
  }
}

@media screen and (max-width: 1366px) {
  #sec02 .inner {
    padding-top: 2em;
  }

  #sec07 .bttn {
    margin-right: 10px;
  }

  #navigation {
    font-size: 1.2em;
  }

  #navigation .ico {
    width: 50px;
  }
}

@media screen and (min-width: 480px) and (max-width: 1280px) {
  #sec02 .inner .descpt {
    padding: 1em 2em;
  }

  #sec02 .inner label.title01 {
    font-size: 2.6em;
  }

  .inner label.title02 {
    padding: 0 1em;
  }
}

@media screen and (max-width: 480px) {
	#menuToggle {
		display: block;
		top: 20px;
	}
  .inner {
    padding-top: 3em;
  }   

  label.title01 {
    font-size: 1.6em;
    display: inline-block;
  }
	
	label.title01:before {
		margin: 0 5px;
		position: relative;
		top: 3px;
	}

  label.title02, .inner label.title02 {
    font-size: 1.4em !important;
    padding: 0 1em;
    display: inline-block;
    text-align: left;
    width: 100%;
  }
	
	#sec01 .image {
		padding-bottom: 0;
	}

  .inner .descpt {
    padding: 2em 1.5em;
    font-size: 1em;
  }

  .inner .chart {
    width: 100vw;
    height: calc(100vw - 6em);
    padding: 0 3em 0 3em;
    margin-bottom: 3em;
  }

  .slider .row {
    /*background: #f9f8f6;*/
  }

  #sec03 .inner .descpt p.pd-tb {
    padding-bottom: 0;
  }
	
	#sec03 .row-btn {
		padding: 0 10px;
		font-size: inherit
	}

  #sec06, #sec08 {
    margin: 0 0.5em;
    display: block;
    width: calc(100vw - 1em);
  }

  #sec06 > .row, #sec08 > .row {
    padding-top: 1em;
    /*background: #f9f8f6;*/
    height: auto;
  }

  #sec06 .row .image {
    padding: 0;
  }

  #sec06 .row .descpt, #sec08 .row .descpt {
    padding: 1em 3em;
    font-size: 1em !important;
  }

  #sec06 .row-btn {
    margin: 10px 0;
    font-size: inherit;
  }

  #sec06 .inner {
    padding-top: 1em;
  }

  #sec06 .inner label.title02 {
    text-align: center;
    padding-bottom: 1em;
  }

  #sec07 {
    /*height: 100vh;*/
    padding-top: 2em;
    padding-bottom: 1em;
  }

  #sec07 .image {
    margin: 0 0 2em 0;
    padding: 0;
  }

  #sec07 .inner {
    margin: 0;
    padding-bottom: 0;
  }

  #sec07 .row label.title01 {
    font-size: 1.6em;
  }

  #sec07 .row-btn {
    /*margin: 0 10px;*/
    padding: 0 10px;
    font-size: inherit
  }

  #sec07 .bttn {
    /*position: absolute;*/
    /*bottom: 10px;*/
    /*width: calc(100vw - 1em);*/
    font-size: inherit;
    display: block;
    margin: 0;
    max-width: unset;
  }

  #sec08 {
    margin: 0;
    width: auto;
    position: relative;
  }

  #sec08 > .row {
    padding-bottom: 2em;    
    max-width: unset;
  }

  #sec08 > .row:first-child {
    padding: 0;
    position: absolute;
    left: 0;
    top: 1em;
    background: transparent;
    text-align: left;
    width: 100%;
  }

  #sec08 > .row:last-child {
    padding-top: 5em;
    border: 1px solid #a09f9e;
  }

  #sec08 .row .tab {
    width: calc(100% - 2em);
  }

  #sec08 .inner {
    padding-top: 2em;
  }

  #sec08 .inner label.title02 {
    padding: 0 1em 1em 1em;
  }

  #sec08 .row .descpt {
    padding-left: 1em;
    padding-right: 1em;
  }

  #sec08 .row .image {
    padding: 0;
  }

  #sec08 .row-btn {
    margin: 0 auto auto auto;
    padding: 0 10px;
  }

  #sec08 .row-btn .bttn, #sec09 .row-btn .bttn {
    font-size: inherit;
    max-width: unset;
  }

  #sec09 .title03 {
    font-size: 1.6em;
  }

  #sec09 > .row > .image {
    width: 30%;
  }

  #sec09 > .row > .inner {
    width: calc(60% - 5px);
  }

  #sec09 > .row > .inner .descpt {
    font-size: inherit;
  }

  .bttn {
    width: 100%;
    padding: 5px 0;
  }

  .r-title {
    position: absolute;
    right: 0;
    border-bottom: 1px solid;
    z-index: 1;
    font-size: 1.6em;
    padding: 0.8em 0.5em 0.1em 1.5em;
    font-weight: 500;
  }

  /*.bx-wrapper .bx-controls-direction a {
    width: 50px;
    height: 50px;
  }

  .bx-wrapper .bx-prev {
    margin-left: -10px;
  }

  .bx-wrapper .bx-next {
    margin-right: -10px; 
  }*/

  .tab {
    font-size: 1.2em;
  }

  .for-pc {
    display: none;
  }

  .for-mobile {
    display: block;
  }

  .head-ico {
    text-align: center;
    padding-top: 1.2em;
    /*height: 5em;*/
  }

  .head-ico .ico {
    width: 50px;
    height: 50px;
    margin: 0 5px;
  }

  .head-ico .ico.active {
    width: 60px;
    height: 60px;
  }

  #menuToggle span {
    width: 33px;
    height: 4px;
  }

  #menuToggle input:checked ~ span {
    transform: rotate(45deg) translate(-10px, -14px);
	  margin-bottom: 7px;
	  left: 3px;
  }

  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-7px, 11px);
    /*transform: rotate(-45deg) translate(0, -1px);*/
  }

  #navigation {
    font-size: inherit;
    right: -136px;
  }

  #navigation .ico {
    width: 30px;
  }

  section .image .watermark {
    font-size: inherit;
    right: 0 !important;
  }

  #timeline .row {
    font-size: inherit;
  }

	section .logo {
		top: 20px;
	}
	
  section .logo img {
    height: 9vw;
  }

  .note {
    padding: 0;
  }

  .note p {
    margin: 0;
    font-size: 0.2em;
    padding: 0 2em;
    line-height: 1.2;
  }

  .scroll-top {
    width: 50px;
  }

  .video {
	  width: 100%;
  	  height: calc(100vw * 716.8 / 1280);
  }
}