img {max-width: 100%;padding:0;margin:0;}

body {opacity: 0;}

body               {padding: 0;margin:0;position: relative;overflow-x:hidden;cursor:pointer;font-family:"Heiti TC","Microsoft JhengHei",arial;}
.pageview          {display:inline-block;padding:0;margin:0;}
.pageview img      {width:100%;}
.pageview:after    {content:'';display:block;width: 100%;height: 100%;position: absolute;top:0;left:0;z-index: 999}



.pagenav          {position:fixed;text-align: center;vertical-align: middle;z-index: 1000}
.pagenav          {bottom:0;width:100px;height:100px;opacity:0;}	
.pagenav a        {padding:3%;display:inline-block;box-sizing:border-box;color:#fff;font-size:20px;text-decoration:none;vertical-align: top;}
.pagenav a:hover  {background:#000;}
.pagenav a        {display:none;}
.pagenav a img    {max-width:200px;padding:20px 0;}
.pagenav.show     {display:inline-block;left:0;top:50%;bottom:auto;transform: translateY(-50%);-webkit-transform: translateY(-50%); background:rgba(0,0,0,0.8);z-index:99999;opacity:1;width:100%;height:auto;max-height: 100%;overflow:auto;}
.pagenav.show a   {display:inline-block;position:relative;z-index:1100;}



.pagetips  {position: fixed;z-index: 99999;left:0;top:0;}
.pagetips  {display:table;box-sizing: border-box;width:100%;height:100%;}
.pagetips  {background:rgba(0,0,0,.75);color:#000;text-align: center;line-height: 2em;font-size: 1.3em;}
.pagetips>div {display:table-cell;text-align: center;vertical-align: middle;}
.pagetips .tips_txt {display:inline-block;background: #fff;box-shadow: 1px 1px 3px rgba(0,0,0,.5);border-radius: 20px;padding:5% 10%;}


.navbar {position:relative;width:100%;top:0;}



.video {position: relative;width: 100%;overflow: hidden;z-index: 10000;}
.video video{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%)}
.video .scrolldown{position: absolute;top:90%;left:50%;transform: translate(-50%,-90%);-webkit-transform: translate(-50%,-90%)}



.sideblock {position: fixed;top:50%;left:0;transform: translateY(-50%);-webkit-transform: translateY(-50%);  z-index: 9999}	
.sideblock a{display: table;}	

.sideblock.right {left:auto;right:0;}



.sticky {position:fixed;transition: all .5s ease-out; -webkit-transition: all .5s ease-out; z-index: 9999;}
.sticky {
	animation-name: sticky;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;

	-webkit-animation-name: sticky;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}

@keyframes sticky {from {top:-10%;opacity: 0;} to {top: 0;opacity: 1;} }
@-webkit-keyframes sticky {from {top:-10%;opacity: 0;} to {top: 0;opacity: 1;} }



.pageview_block {display:table;}
.pageview_block a {display:table;line-height: 0}
.pageview_block a img{width:100%;}