@charset "UTF-8";

/* --------------------------------
 * 共同
 * -------------------------------- */

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/css?family=Roboto);

body {
	color: #111;
    font-family: Roboto, Arial, 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'LiHei Pro', sans-serif;
	text-align: center;
	background-color: #fff;
	font-size: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
a:link, a:visited {
	text-decoration: none;
	color: #C00;
}
a:hover, a:active {
	text-decoration: none;
	color: #C00;
}
input, button, select, textarea {
	outline: none;
}
*:focus {
	outline: none;
}
label {
  cursor: pointer;
}
#page {
    width: calc(100% - 60px);
}
#page-artwork {
    width: calc(100% - 360px);	
}
@media only screen and (max-width:1440px) {
#page {
    width: calc(100% - 48px);	
}
#page-artwork {
    width: calc(100% - 48px);	
}
}
@media only screen and (max-width:480px) {
#page {
    width: calc(100% - 36px);	
}
#page-artwork {
    width: calc(100% - 36px);	
}
}



/* --------------------------------
 * 主選單
 * -------------------------------- */
.sidebar {
	width: 60px;
	height: 100%;
	background-color: #C00;
	position: fixed;
	top: 0;
	right: 0;
}
.ham {
	width: 60px;
	height: 60px;
	display: block;
	background-color: #C00;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1000;
}
.ham-origin {
	position: absolute;
	top: 50%;
	left: 50%;
}
.ham-bar {
  height: 2px;
  width: 18px;
  position: absolute;
  background-color: white;
  margin: -1px 0 0 -9px;
  transition: all .5s;
}
.ham-bar-top {
  transform: translateY(-6px);
}
.ham-bar-bottom {
  transform: translateY(6px);
}
#nav-toggle {
  display: none;  
}
#nav-toggle:checked ~ .ham .ham-bar-middle {
  opacity: 0;
}
#nav-toggle:checked ~ .ham .ham-bar-top {
  transform: rotate(-45deg);
}
#nav-toggle:checked ~ .ham .ham-bar-bottom {
  transform: rotate(45deg);
}
.language {
	background-color: #000;
	position: absolute;
	top: 0;
	right: 60px;
	z-index: -1;	
}
.icon-fb {
	background-color: #C00;
}
.icon-ig {
	background-color: #000;
}
.icon-home {
	background-color: #000;
	margin-top: 60px;
}
.icon-video {
	background-color: #C00;
	display: none;	
}
.copyrigh {
	font-family: '微軟正黑體', sans-serif;
	font-size: 16px;
	color: #FFF;
	line-height: 60px;
	position: absolute;
	bottom: 0;
	writing-mode: vertical-lr;
	text-orientation: mixed;
	vertical-align: middle;
	background-color: #000;
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: -1;
}
.menu {
	width: 100%;
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 1);
	transform: translateX(100%);/* 用 translate 把選單藏到畫面右邊去 */
	transition: transform 1s;
	background-color: #FDFDFD;
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
	height: 100%;
}
#nav-toggle:checked ~ .menu {
  transform: none;
}
.menu-list {
	list-style: none;
	padding: 0;
}
.menu-list > li:nth-child(2) {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #EEE;
}
.menu-item {
	max-width:330px;
	height: 240px;
	font-size: 24px;
	font-weight: 700;
	display: inline-block;
	vertical-align: top;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #EEE;
	padding-right: 86px;
	padding-left: 86px;
	text-align: left;
}
.menu-item a {
	background: transparent;
	outline: none;
	transition: 0.9s ease-in-out;
	padding-top: 1px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
}
.menu-item a:hover {
	transition: 0.9s ease-in-out;
	background: #C00;
	color: #FFF;
	border-radius: 30px;
}
.menu-sub {
	font-size: 18px;
	font-weight: normal;
}
.menu-sub li {
	padding-top: 12px;
}
.menu-sub li a {
	color: #000;
}
.name {
	margin-bottom: 50px;
}
.email {
	margin-top: 30px;
	padding-left: 25px;
	margin-bottom: 5%;
}
@media only screen and (max-width:1440px) {
.sidebar {
	width: 48px;
}
.ham {
	width: 48px;
	height: 48px;
}
.ham-bar {
	width: 16px;
	margin-left: -8px;
}
.language img, .icon-fb img, .icon-ig img, .icon-home img, .icon-video img {
	width: 48px;
	height: 48px;
}
.language {
	right: 48px;
}
.copyrigh {
	font-size: 13px;
	line-height: 48px;
}
.menu-item {
	font-size: 20px;
	height: 210px;
}
.menu-sub {
	font-size: 15px;
}
.name {
	margin-bottom: 40px;
}
.name img {
	width: 40%;
	max-width: 300px;
}	
}
@media only screen and (max-width:1200px) {
.menu-item {
	height: 200px;
	padding-right: 62px;
	padding-left: 62px;
}
.name {
	margin-bottom: 20px;
}
.email {
	margin-bottom: 0%;
}
}
@media only screen and (max-width:960px) {
.menu-list > li:nth-child(2) {
	max-width:100%;
	height: 60px;
	display: block;
	border-left-style: none;
	border-right-style: none;
	text-align: center;
}
.menu-list > li:nth-child(3) {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #EEE;
}
.name img {
	width: 50%;
}
.email {
	padding-left: 0px;
}
}
@media only screen and (max-width:840px) {
.language {
	right: 0px;
	margin-top: 48px;	
}
.icon-fb {
	background-color: #000;
}
.icon-ig {
	background-color: #C00;
}
.icon-home {
	background-color: #C00;
	margin-top: 96px;
}
.menu-item a {
	transition: 0.1s ease-in-out;
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
}
.menu-item a:hover {
	transition: 0.1s ease-in-out;
}
}
@media only screen and (max-width:640px) {
.menu-item {
	padding-right: 40px;
	padding-left: 40px;
}
.menu-list > li:nth-child(2) {
	height: 50px;
}
.name {
	margin-bottom: 20px;
}
.name img {
	width: 50%;
	min-width:240px;
}
.icon-video {
	background-color: #000;
	display: block;
}
}
@media only screen and (max-width:480px) {
.sidebar {
	width: 36px;
}
.ham {
	width: 36px;
	height: 36px;
}
.ham-bar {
	height: 1px;
	width: 12px;
	margin-left: -6px;
	margin-top: 0px;
}
.ham-bar-top {
  transform: translateY(-4px);
}
.ham-bar-bottom {
  transform: translateY(4px);
}
.language img, .icon-fb img, .icon-ig img, .icon-home img, .icon-video img {
	width: 36px;
	height: 36px;
}
.language {
	margin-top: 36px;	
}
.icon-home {
	margin-top: 72px;	
}
.copyrigh {
	font-size: 13px;
	line-height: 36px;
}
.menu-item {
	font-size: 18px;
	height: 190px;
	padding-right: 10%;
	padding-left: 10%;
}
.menu-list > li:nth-child(2) {
	height: 40px;
}
.menu-sub {
	font-size: 14px;
}
.email img {
	width: 36px;
}
.name {
	margin-bottom: 25px;
}
.name img {
	width: 45%;
	min-width:160px;
}
}
@media only screen and (max-width:360px) {
.menu-list > li:nth-child(2) {
	height: 40px;
}
.name {
	margin-bottom: 10px;
}
.email {
	margin-top: 20px;
	margin-bottom: 2.5%;
}
}



/* --------------------------------
 * 系列作品
 * -------------------------------- */
.artwork-menu {
	width: calc(100% - 360px);
	height: 140px;
	position: absolute;
	z-index: -20;
} 
.artwork-menu h2 {
	font-size: 32px;
	font-weight: 700;
	padding-top: 50px;
}
.artwork-menu h3 {
	width: 1px;
	height: 15px;
	background-color: #000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 6px;
	margin-bottom: 6px;
}
.artwork-menu .artwork-series a {
	width: 100px;
	font-size: 18px;
	font-weight: normal;
	color: #F3F3F3;
	border: 1px solid #f3f3f3;
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	padding-top: 6px;
	padding-bottom: 5px;
}
.artwork-menu .artwork-series a:nth-child(1) {
	margin-left: 10px;
}
.artwork-menu .artwork-series a:hover {
	color: #000;
	border: 1px solid #000;
}
.or {
	color: #000 !important;
	border: 1px solid #000 !important;
}
#artwork-img {
	width: calc(100% - 360px);
	position: absolute;
	top:140px;
	z-index: -30;	
}
.item {
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
	height: calc(100vh - 140px);
}
#artwork-img img {
	width: auto;
	height: 90%;
	max-height: 730px;
}
#artwork-img p {
	font-size: 18px;
	font-weight: 300;
	height: 10%;
}
.item .preface {
	max-width: 430px;
	font-size: 20px;
	font-weight: 300;
	line-height: 2em;
	text-align: left;
	margin-left: 9%;
}
@media only screen and (max-width:1440px) {
.artwork-menu {
	width: calc(100% - 318px);
} 
.artwork-menu h2 {
	font-size: 26px;
}
.artwork-menu .artwork-series a {
	width: 90px;
	font-size: 16px;	
}
#artwork-img {
	width: calc(100% - 318px);
}
#artwork-img img {
	height: 87.5%;
}
#artwork-img p {
	font-size: 16px;
	height: 12.5%;
}
.item .preface {
	font-size: 16px;
}
}
@media only screen and (max-width:1200px) {
.artwork-menu {
	width: calc(100% - 96px);
} 	
#artwork-img {
	width: calc(100% - 96px);
}
}
@media only screen and (max-width:960px) {
.artwork-menu {
} 
#artwork-img img {
	height: 82.5%;
}
#artwork-img p {
	height: 17.5%;
}
}
@media only screen and (max-width:840px) {
.artwork-menu {
	width: calc(100% - 48px);
	height: 160px;
}
.artwork-menu h2 {
	font-size: 24px;
	padding-top: 40px;
}
.artwork-menu .artwork-series  {
	width: 300px;
	margin-right: auto;
	margin-left: auto;
}
.artwork-menu .artwork-series a {
	width: 80px;
	font-size: 15px;
	margin-bottom: 10px;
}
.artwork-menu .artwork-series a:nth-child(1), .artwork-menu .artwork-series a:nth-child(4) {
	margin-left: 10px;
}
#artwork-img {
	width: calc(100% - 48px);
	top: 160px;
}
.item{
	height: calc(100vh - 160px);
}
#artwork-img img {
	height: 75%;
}
#artwork-img p {
	font-size: 15px;
	height: 25%;
}
.item .preface {
	font-size: 15px;
	padding-bottom: 28%;
}
}
@media only screen and (max-width:720px) {

#artwork-img img {
	height: 67.5%;
}
#artwork-img p {
	height: 32.5%;
}
}
@media only screen and (max-width:600px) {
#artwork-img img {
	height: 62.5%;
	padding-top: 20px;
}
#artwork-img p {
	height: 37.5%;
	padding-top: 20px;
}
.item .preface {
	margin-left: 2%;
	padding-bottom: 28%;
}	
}
@media only screen and (max-width:480px) {
.artwork-menu {
	width: calc(100% - 36px);
	height: 18vh;
} 
.artwork-menu h2 {
	font-size: 21px;
	padding-top: 45px;
}
.artwork-menu h3 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.artwork-menu .artwork-series  {
	width: 270px;
}
.artwork-menu .artwork-series a {
	font-size: 13px;
	width: 70px;
	margin-bottom: 8px;
}
.item {
	height: 82vh;
}	
#artwork-img {
	width: calc(100% - 36px);
	top: 18vh;
}
#artwork-img img {
	height: 60%;
	padding-top: 50px;
}
#artwork-img p {
	font-size: 12px;
	font-weight: normal;
	padding-right: 22%;
	padding-left: 22%;
	line-height: 1.25em;
	text-align: left;
}
.item .preface {
	font-size: 12px;
	font-weight: normal;
	margin-left: -5%;
	padding-bottom: 36%;
}
}



/* --------------------------------
 * 系列作品--動態轉換
 * -------------------------------- */
.fade-in {
 opacity:0;  /* 一開始讓東西消失 */
 -webkit-animation:fadeIn ease-in 1;  /* 呼叫命名為 fadeIn 的 keyframe, 使用 ease-in 動畫效果並且只重複執行一次 */
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;

 -webkit-animation-fill-mode:forwards;  /* 確保在動畫完成後，我們會保持在最後的 keyframe 值 (opacity: 1)*/
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;

 -webkit-animation-duration:0.5s;
 -moz-animation-duration:0.5s;
 animation-duration:0.5s;
}
.fade-in.one {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}



/* --------------------------------
 * 系列作品--創作發想
 * -------------------------------- */
#artwork-think{
	position: relative;
	z-index: -10;
}
.thinkmenu label {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -48px;
	margin: auto;
	display: none;
}
.thinkmenu label h5 {
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	text-orientation: mixed;
	vertical-align: middle;
}
#thinkmenu-active:checked + .thinkmenu {
   transform: translateX(0);
}
#thinkmenu-active:checked + .thinkmenu label img {
   transform: scaleX(-1);
}
#thinkmenu-active {
   position: absolute;
   opacity: 0;
   z-index: -10;
}
.thinkmenu {
	width: 300px;
	height: 100%;
	background-color: #F3F3F3;
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
    position: relative;
	transform: translateX(0%);/* 用 translate 把選單藏到畫面右邊去 */
	transition: 0.5s;
	position: fixed;
	top: 0;
	right: 60px;
}
.thinkmenu h5 {
	font-size: 21px;
	color: #333;
	font-weight: bolder;
}
.thinkmenu p {
	font-size: 16px;
	color: #333;
	line-height: 1.5em;
	text-align: justify;
	padding-top: 30px;
	padding-right: 40px;
	padding-bottom: 0px;
	padding-left: 40px;
}
@media only screen and (max-width:1440px) {
.thinkmenu {
	width: 270px;
	right: 48px;
}
.thinkmenu p {
	font-size: 14px;
}
}
@media only screen and (max-width:1200px) {
.thinkmenu label {
	width: 48px;
	height: 48px;
	display: block;
}
.thinkmenu label img {
	width: 100%;
}
.thinkmenu {
	transform: translateX(100%);/* 用 translate 把選單藏到畫面右邊去 */
}
}
@media only screen and (max-width:480px) {
.thinkmenu {
	width: 225px;
	right: 36px;
}
.thinkmenu label {
	width: 36px;
	height: 36px;
	left: -36px;
}
.thinkmenu h5 {
	font-size: 18px;
}
.thinkmenu p {
	font-size: 12px;
	line-height: 1.75em;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 30px;
}
.thinkmenu label img {
	width: 36px;
}
}
	


/* --------------------------------
 * 藝術家簡介
 * -------------------------------- */
.artist {
	height: 100vh;
	background-color: #f3f3f3;
}
.artist::before{
    content:'';
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
}
.artist ul {
	width: 80%;
	max-width: 1080px;
	display: inline-block;
	vertical-align: middle;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../img/signature.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 170px;
}
.artist ul li {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
.artist ul li:nth-child(1) {
	width: 38%;
	padding-right: 5%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
}
.artist ul li:nth-child(2) {
	width: 62%;
	padding-left: 5%;
}
.artist ul li img {
	width: 100%;
}
.artist ul li h4 {
	font-size: 36px;
	font-weight: 900;
	line-height: 1.25em;
	text-align: justify;	
	margin-top: -6px;
}
.artist ul li p {
	font-size: 18px;
	line-height: 1.35em;
	text-align: justify;
   　text-justify: inter-ideograph;
  　-ms-text-justify: inter-ideograph;/*IE9*/
  　-moz-text-align-last:justify;/*Firefox*/
   -webkit-text-align-last:justify;/*Chrome*/
	margin-top: 30px;
}
#aboutlink {
	margin-top: 40px;
}
#aboutlink span {
	font-size: 17px;
	font-weight: bolder;
	margin-right: 15px;
	padding-top: 7px;
	padding-right: 17px;
	padding-bottom: 7px;
	padding-left: 17px;
	border: 1px solid #C00;
}
#aboutlink span:hover {
	background-color: #C00;
	color: #FFF;
	transition: 0.9s ease-in-out;
	border-radius: 30px;
}


@media only screen and (max-width:1440px) {
.artist ul {
	width: 75%;
	min-width: 900px;
	background-size: 153px;
}
.artist ul li:nth-child(1) {
	padding-right: 4%;
}
.artist ul li:nth-child(2) {
	padding-left: 4%;
}
.artist ul li h4 {
	font-size: 32px;
}
.artist ul li p {
	font-size: 16px;
}
#aboutlink span {
	font-size: 15px;
}	
}
@media only screen and (max-width:1200px) {
.artist ul {
	width: 80%;
	min-width: 720px;
	background-size: 136px;
}
.artist ul li:nth-child(1) {
	width: 42%;
	padding-right: 3%;
}
.artist ul li:nth-child(2) {
	width: 58%;
	padding-left: 3%;
	padding-bottom: 10px;
}	
}
@media only screen and (max-width:1080px) {
.artist ul li h4 {
	font-size: 28px;
}
.artist ul li p {
	font-size: 14px;
	line-height: 1.4em;
}
#aboutlink span {
	font-size: 14px;
}
}
@media only screen and (max-width:960px) {
.artist ul {
	width: 85%;
	min-width: 600px;
	background-size: 119px;
}
.artist ul li:nth-child(1) {
	width: 38%;
	padding-right: 3%;
	border-right-width: 0px;
}
.artist ul li:nth-child(2) {
	width: 62%;
	padding-left: 3%;
	padding-bottom: 36px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
}
}
@media only screen and (max-width:720px) {
.artist {
	width: 100%;
	height: 100%;
}
.artist ul {
	width: calc(100% - 96px);
	min-width: 0px;
	margin-top: 48px;
	margin-bottom: 48px;
	background-position: left bottom;
	background-size: 30%;
}
.artist ul li {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.artist ul li:nth-child(1) {
	width: 100%;
	padding-right: 0%;
}
.artist ul li:nth-child(2) {
	width: 100%;
	padding-left: 0%;
	padding-bottom: 100px;
	border-left-width: 0px;
}
.artist ul li h4 {
	margin-top: 24px;
}
.artist ul li p {
	margin-top: 24px;
}
#aboutlink {
	margin-top: 36px;
	text-align: right;
}
#aboutlink span {
	margin-right: 0px;
	margin-left: 5px;
}
}
@media only screen and (max-width:600px) {
.artist ul {
	background-size: 45%;
}
.artist ul li:nth-child(2) {
	padding-bottom: 50px;
}
}
@media only screen and (max-width:480px) {
.artist ul {
	width: calc(100% - 48px);
	margin-top: 24px;
	margin-bottom: 24px;
}
.artist ul li:nth-child(2) {
	padding-bottom: 60px;
}
.artist ul li h4 {
	font-size: 22px;
	margin-top: 18px;
}
.artist ul li p {
	margin-top: 15px;
}
#aboutlink {
	margin-top: 25px;
}
#aboutlink span {
	font-size: 13px;
	padding-top: 6px;
	padding-right: 9px;
	padding-bottom: 5px;
	padding-left: 9px;
}
}



/* --------------------------------
 * 藝術家年表
 * -------------------------------- */
.movie {
	position: relative;
	z-index: -5;
}
.mouse {
	position: absolute;
	bottom: 0;
	left: calc(50% - 40px);
	z-index: 10;
}
.mouse img {
	position: absolute;
    top: -150px;
    animation-name: mouse;
    animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	background-image: url(../img/line_2.gif);
	background-repeat: no-repeat;
	background-position: center top 30px;
}
@keyframes mouse {
  0%{
    top: -150px;
}
  80%{
    top: -135px;
}
  100%{
    top: -150px;
}
}
.header {
	display: none;
	padding-bottom: 80px;
}
.header img {
    width: 100%;
}
.yearline {
	position: relative;
	z-index: -1;
	height: 7400px;
	background-image: url(../img/line_2.gif);
	background-repeat: no-repeat;
	background-position: center top 500px;
}
.yearline p {
	font-family: '微軟正黑體', 'Noto Sans TC', sans-serif;
	font-size: 17px;
	font-weight: bold;
	margin-top: 10px;
	line-height: 1.2em;
}
#yearimg-box li {
	padding: 20px;
	border: 1px solid #CCC;
	width: auto;
	background-color: #FFF;
	background-image: url(../img/icon_arrow.png);
	background-repeat: no-repeat;
	background-position: center top;
	display: inline-block;
	vertical-align: top;
}
#yearimg-box img {
    height:200px;
}
#a {
	margin-right: 10px;
}
.year-box {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 34px;
	font-weight: bolder;
	padding: 8px;
	border: 1px solid #CCC;
	width: 130px;
	display: table;
	background-color: #FFF;
	position: absolute;
	left: calc(50% - 65px);
}
.yearimg-2011 #yearimg-box > li > p:nth-child(3), .yearimg-2009 #yearimg-box > li > p:nth-child(3), .yearimg-2008 #yearimg-box > li > p:nth-child(3), .yearimg-2005 #yearimg-box > li > p:nth-child(3), .yearimg-2004 #yearimg-box > li > p:nth-child(3), .yearimg-2001 #yearimg-box > li > p:nth-child(3), .yearimg-1995 #yearimg-box > li > p:nth-child(3) {
	display: none;
}


.year-2018 {
	top: 50px;
}
.yearimg-2018 {
	position: absolute;
	left: calc(50% - 111px);
	top: 130px;
}


.year-2017 {
	top: 500px;
}
.yearimg-2017 {
	position: absolute;
	left: calc(50% - 161px);
	top: 580px;
}


.year-2015 {
	top: 950px;
}
.yearimg-2015 {
	position: absolute;
	left: calc(50% - 121px);
	top: 1030px;
}


.year-2011 {
	top: 1400px;
}
.yearimg-2011 {
	position: absolute;
	left: calc(50% - 373px);
	top: 1480px;
}


.year-2009 {
	top: 1850px;
}
.yearimg-2009 {
	position: absolute;
	left: calc(50% - 101px);
	top: 1930px;
}


.year-2008 {
	top: 2300px;
}
.yearimg-2008 {
	position: absolute;
	left: calc(50% - 101px);
	top: 2380px;
}


.year-2006 {
	top: 2750px;
}
.yearimg-2006 {
	position: absolute;
	left: calc(50% - 91px);
	top: 2830px;
}


.year-2005 {
	top: 3200px;
}
.yearimg-2005 {
	position: absolute;
	left: calc(50% - 91px);
	top: 3280px;
}


.year-2004 {
	top: 3650px;
}
.yearimg-2004 {
	position: absolute;
	left: calc(50% - 91px);
	top: 3730px;
}


.year-2002 {
	top: 4100px;
}
.yearimg-2002 {
	position: absolute;
	left: calc(50% - 373px);
	top: 4180px;
}


.year-2001 {
	top: 4550px;
}
.yearimg-2001 {
	position: absolute;
	left: calc(50% - 121px);
	top: 4630px;
}


.year-1995 {
	top: 5000px;
}
.yearimg-1995 {
	position: absolute;
	left: calc(50% - 121px);
	top: 5080px;
}


.year-1993 {
	top: 5450px;
}
.yearimg-1993 {
	position: absolute;
	left: calc(50% - 121px);
	top: 5530px;
}


.year-1992 {
	top: 5900px;
}
.yearimg-1992 {
	position: absolute;
	left: calc(50% - 373px);
	top: 5980px;
}



.year-1990 {
	top: 6350px;
}
.yearimg-1990 {
	position: absolute;
	left: calc(50% - 121px);
	top: 6430px;
}


.year-1989 {
	top: 6800px;
}
.yearimg-1989 {
	position: absolute;
	left: calc(50% - 121px);
	top: 6880px;
}


.year-1985 {
	top: 7250px;
}
.yearimg-1985 {
	position: absolute;
	left: calc(50% - 121px);
	top: 7330px;
	padding-bottom: 80px;
}
@media only screen and (min-width: 1281px) and (max-width: 1600px) {
.mouse {
	bottom: -50px;
	left: calc(50% - 35px);
}
.mouse img {
	width:70px;
}
.yearimg-1989 {
	left: calc(50% - 373px);
}
}

@media only screen and (min-width: 641px) and (max-width: 1280px) {
.mouse {
	bottom: -30px;
	left: calc(50% - 35px);
}
.mouse img {
	width:70px;
}
.yearline {
	height: 7000px;
}
.yearline p {
	font-size: 15px;
	font-weight: normal;
	margin-top: 8px;
}
#yearimg-box li {
	padding: 15px;
	background-size: 8px;
}
#yearimg-box img {
    height:150px;
}
.year-box {
	font-size: 27px;
	padding: 6px;
	width: 120px;
	left: calc(50% - 60px);
}
.yearimg-2009 #yearimg-box > li > p:nth-child(2), .yearimg-2008 #yearimg-box > li > p:nth-child(2) {
	display: none;
}
.yearimg-2009 #yearimg-box > li > p:nth-child(3), .yearimg-2008 #yearimg-box > li > p:nth-child(3) {
	display: block;
}


.year-2018 {
	top: 50px;
}
.yearimg-2018 {
	left: calc(50% - 84px);
	top: 120px;
}


.year-2017 {
	top: 480px;
}
.yearimg-2017 {
	left: calc(50% - 121px);
	top: 550px;
}


.year-2015 {
	top: 910px;
}
.yearimg-2015 {
	left: calc(50% - 91px);
	top: 980px;
}


.year-2011 {
	top: 1340px;
}
.yearimg-2011 {
	left: calc(50% - 283px);
	top: 1410px;
}


.year-2009 {
	top: 1770px;
}
.yearimg-2009 {
	left: calc(50% - 76px);
	top: 1840px;
}


.year-2008 {
	top: 2200px;
}
.yearimg-2008 {
	left: calc(50% - 76px);
	top: 2270px;
}


.year-2006 {
	top: 2630px;
}
.yearimg-2006 {
	left: calc(50% - 68.5px);
	top: 2700px;
}


.year-2005 {
	top: 3060px;
}
.yearimg-2005 {
	left: calc(50% - 68.5px);
	top: 3130px;
}


.year-2004 {
	top: 3490px;
}
.yearimg-2004 {
	left: calc(50% - 68.5px);
	top: 3560px;
}


.year-2002 {
	top: 3920px;
}
.yearimg-2002 {
	left: calc(50% - 283px);
	top: 3990px;
}


.year-2001 {
	top: 4350px;
}
.yearimg-2001 {
	left: calc(50% - 91px);
	top: 4420px;
}


.year-1995 {
	top: 4780px;
}
.yearimg-1995 {
	left: calc(50% - 91px);
	top: 4850px;
}


.year-1993 {
	top: 5210px;
}
.yearimg-1993 {
	left: calc(50% - 91px);
	top: 5280px;
}


.year-1992 {
	top: 5640px;
}
.yearimg-1992 {
	left: calc(50% - 283px);
	top: 5710px;
}



.year-1990 {
	top: 6070px;
}
.yearimg-1990 {
	left: calc(50% - 91px);
	top: 6140px;
}


.year-1989 {
	top: 6500px;
}
.yearimg-1989 {
	left: calc(50% - 283px);
	top: 6570px;
}


.year-1985 {
	top: 6930px;
}
.yearimg-1985 {
	left: calc(50% - 91px);
	top: 7000px;
}	
}
@media only screen and (max-width:840px) {
.yearline {
	background-position: center top 40px;
}
.yearline-gif img {
	margin-top: 70px;
	display: none;	
}
}
@media only screen and (max-width:640px) {
.mouse {
	bottom: -80px;
	left: calc(50% - 24px);
}
.mouse img {
	width: 48px;
}
.video {
	display: none;	
}
.header {
	display: block;	
}
.header p {
	margin-top: 10px;
}
.yearline {
	height: 5400px;
	margin-right: auto;
	margin-left: auto;
}
.yearline p {
	font-size: 13px;
	font-weight: normal;
	margin-top: 8px;
}
#yearimg-box li {
	padding: 10px;
	background-size: 8px;
}
#yearimg-box img {
    height:100px;
}
.year-box {
	font-size: 20px;
	padding: 6px;
	width: 70px;
	left: calc(50% - 35px);
}
.yearimg-2011 #yearimg-box > li > p:nth-child(2), .yearimg-2009 #yearimg-box > li > p:nth-child(2), .yearimg-2008 #yearimg-box > li > p:nth-child(2), .yearimg-2005 #yearimg-box > li > p:nth-child(2), .yearimg-2004 #yearimg-box > li > p:nth-child(2), .yearimg-2001 #yearimg-box > li > p:nth-child(2), .yearimg-1995 #yearimg-box > li > p:nth-child(2) {
	display: none;
}
.yearimg-2011 #yearimg-box > li > p:nth-child(3), .yearimg-2009 #yearimg-box > li > p:nth-child(3), .yearimg-2008 #yearimg-box > li > p:nth-child(3), .yearimg-2005 #yearimg-box > li > p:nth-child(3), .yearimg-2004 #yearimg-box > li > p:nth-child(3), .yearimg-2001 #yearimg-box > li > p:nth-child(3), .yearimg-1995 #yearimg-box > li > p:nth-child(3) {
	display: block;
}


.yearimg-2018 {
	left: calc(50% - 117px);
	top: 100px;
}


.year-2017 {
	top: 350px;
}
.yearimg-2017 {
	left: calc(50% - 81px);
	top: 400px;
}


.year-2015 {
	top: 650px;
}
.yearimg-2015 {
	left: calc(50% - 61px);
	top: 700px;
}


.year-2011 {
	top: 950px;
}
.yearimg-2011 {
	left: calc(50% - 127px);
	top: 1000px;
}


.year-2009 {
	top: 1265px;
}
.yearimg-2009 {
	left: calc(50% - 51px);
	top: 1315px;
}


.year-2008 {
	top: 1580px;
}
.yearimg-2008 {
	position: absolute;
	left: calc(50% - 51px);
	top: 1630px;
}


.year-2006 {
	top: 1895px;
}
.yearimg-2006 {
	left: calc(50% - 97px);
	top: 1945px;
}
.yearimg-2006 p {
	width:68px;
	margin-right: auto;
	margin-left: auto;
}


.year-2005 {
	top: 2210px;
}
.yearimg-2005 {
	left: calc(50% - 46px);
	top: 2260px;
}


.year-2004 {
	top: 2525px;
}
.yearimg-2004 {
	left: calc(50% - 46px);
	top: 2575px;
}


.year-2002 {
	top: 2840px;
}
.yearimg-2002 {
	left: calc(50% - 127px);
	top: 2890px;
}


.year-2001 {
	top: 3140px;
}
.yearimg-2001 {
	left: calc(50% - 127px);
	top: 3190px;
}


.year-1995 {
	top: 3455px;
}
.yearimg-1995 {
	left: calc(50% - 61px);
	top: 3505px;
}


.year-1993 {
	top: 3755px;
}
.yearimg-1993 {
	left: calc(50% - 127px);
	top: 3805px;
}
.yearimg-1993 p {
	width: 90px;
	margin-right: auto;
	margin-left: auto;
}


.year-1992 {
	top: 4070px;
}
.yearimg-1992 {
	width:264px;
	left: calc(50% - 127px);
	top: 4120px;
}
.yearimg-1992 #yearimg-box > li:nth-child(3) {
	margin-top: 10px;
	margin-right: 10px;
}


.year-1990 {
	top: 4510px;
}
.yearimg-1990 {
	left: calc(50% - 127px);
	top: 4560px;
}


.year-1989 {
	top: 4810px;
}
.yearimg-1989 {
	width:264px;
	left: calc(50% - 127px);
	top: 4860px;
}
.yearimg-1989 #yearimg-box > li:nth-child(3) {
	margin-top: 10px;
	margin-right: 10px;
}


.year-1985 {
	top: 5250px;
}
.yearimg-1985 {
	left: calc(50% - 61px);
	top: 5300px;
	padding-bottom: 50px;
}
}
@media only screen and (max-width:480px) {
.mouse {
	bottom: -65px;

}
}