*,
*:hover,
*:focus {outline: 0}

img {max-width: 100%;padding:0;margin:0;vertical-align: top;backface-visibility: hidden;-webkit-backface-visibility: hidden;}

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%;vertical-align: top;}
.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;}
.pagenav.show a span {background:#af010f;border-radius:5px;padding:5px 10px;display: inline-block;vertical-align: middle;margin:10px;}
.pagenav.show a span:hover {opacity: .85}


.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;z-index: 12000;}


.scrolldown{position: absolute;bottom:100px;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);z-index: 11000;}

.scrolldown img[src='']{display: none;}
.scrolldown[data-active='no']{display: none;}
.scrolldown[data-active='']{display: none;}

.toggleBtn img[src='']{display: none;}
.toggleBtn[data-active='no']{display: none;}
.toggleBtn[data-active='']{display: none;}


.loading img[src='']{display: none;}
.loading[data-active='no']{display: none;}
.loading[data-active='']{display: none;}


.overlay img[src='']{display: none;}
.overlay[data-active='no']{display: none;}
.overlay[data-active='']{display: none;}




.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 a[href^="#"]{width:100%;height: 100%;position: absolute;top:0;left:0;}

.bgVideoBlock {height:0;}

.banner {position: relative;overflow:hidden;z-index: 10000}
.slidBanner {z-index: 10000;background: #fff;position: relative;}


.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;text-align: right}
.sideblock.right a{width:100%;text-align: right}



.sticky {position:fixed;transition: all .5s ease-out; -webkit-transition: all .5s ease-out; z-index: 12000;}
.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;} }


.stickier:not(.sticky) .scroll {display: none}
.sticky .normal{display: none;}
.tmpSticky .scroll{display: none;}

.stickier[data-overBanner="yes"] {

}
.stickier[data-overBanner="yes"] .normal{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
}

.bgDeco {position: absolute;z-index: 0;}




.pageview_block {display:table;position: relative;z-index: 1}
.pageview_block a {display:table;line-height: 0}
.pageview_block a img{width:100%;}


.overlay   {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}

.loading   {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.loading img.animate{
	display: inline-block;
    animation:loading_animation 3s infinite; /* infinite=無限遁環 */
    animation-timing-function: linear;
    -webkit-animation:loading_animation 3s infinite;    
    /*-webkit-animation-timing-function: linear;*/

}
@keyframes loading_animation         {to { transform:rotate(0deg);} from { transform:rotate(360deg);} }
@-webkit-keyframes loading_animation {to { -webkit-transform:rotate(0deg);} from { -webkit-transform:rotate(360deg);} }




.scrollblock {height: 80vh;overflow: hidden;}
.scrollblock div{position: relative;overflow:auto;width:100%;height:100%; }
.scrollblock div::-webkit-scrollbar {display: none; }


.parallaxBlock {
	position: relative;
	z-index: 1;
}



/* 層級：
	body

		.pagenav 99999
		.pagetips 99999		
		#page1
			.navbar 12000
			.banner 10000
				.slidBanner 10000
				.scrolldown 11000
			.video 10000			
				.scrolldown 11000
			.sideblock  9999
			.parallaxBlock 1
			.pageview_block 1
			.bgDeco 0
*/