canvas {opacity: 0.6;position: absolute;z-index: 1;}
.mobileSidebar {z-index: 4; }
.topmenu { position: fixed;z-index:3;}
.footer {position: fixed;z-index:3;}
.footer .copyright {padding:15px 0;}
.footer-mob {display: none;}

.TitleArea {z-index:2;}


#navSide {position: fixed;right: 20px;top: 50%;margin-top: -130px;z-index: 3; }
#navSide li a {display: block;width: 16px;height: 16px;background: #ababab;border-radius: 8px; margin: 15px 0; }
#navSide li a.active {background: #222222;border: 3px solid #ababab; } /*右方小圈中間色*/

.carsec01, .carsec02, .carsec03 {background-attachment: scroll;}
.mapblock .container {min-height:640px;}

.lightbox {z-index:4;-webkit-overflow-scrolling: touch;}

.icon-ardown {background-image: url(../images/armarker.png);text-align:center;}
.icon-ardown img {display: none;margin-top: 30px;}
.icon-ardown:hover img {display:inline-block;}

.secitonBlock h1 {font-size: 28px;margin-bottom: 10px;}


.hidden{ opacity:0;}
.visible{ opacity:1;}

/* Index animation */
.main .img-title {animation-delay: 1s;}
.main .appier {animation-delay: 1s;}
.main .more-btn {animation-delay: 1.7s;}
.main .video-btn {animation-delay: 1.9s;}

/* Feature */
.Exhibition .TitleArea {animation-delay: 0.6s;}
.Exhibition .TitleArea h1 {animation-delay: 1s;}
.Exhibition .TitleArea .appier {animation-delay: 1.4s;}

/* App */
.App .TitleArea {animation-delay: 0.6s;}
.App .TitleArea .appier {animation-delay: 1s;}
.App .TitleArea .tutorialBtn {animation-delay: 1.5s;}

/* Exhibition */
.Exhibition h2 {animation-delay: 1s;}
.Exhibition .purplebutton {animation-delay: 1.8s;}

/* Signup */
.Register .signupForm option {background-color: #fff;}
.Register .signupForm .bigT {animation-delay: 0.6s;}
.Register .signupForm p {animation-delay: 0.6s;}
.Register .signupForm form {animation-delay: 1.5s;}

.flare	{ /* with animation properties */
	background: url(../images/lensflare-2.png) 0 0 no-repeat; 
	position: absolute; 
	top: -32%; 
	right: 30%; 
	width: 616px; 
	height: 598px; 
	
	/* microsoft ie */
	animation-name: spin; 
	animation-duration: 10000ms; 
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}
@keyframes spin {
	from { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
		transform: rotate(0deg) ;
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
		transform: rotate(360deg) ;
	}
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
	.sky {top:-40%;}
	.flare	{ top: -57%; right:25%;}
	.TitleArea h1 {font-size:24px;}
	.TitleArea h2 {font-size:20px;}
	.TitleArea {max-width: 400px !important;}
	.main .TitleArea {right: 5%;}
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
}
@media only screen and (max-width: 768px) {
	.wrapper.main {overflow: hidden;}
	.mapblock .container {min-height:560px;}
	.footer {position:relative;height:45px;max-height: 45px;}
	.footer-mob {display: block; position: absolute;bottom: 60px;}
	.footer-mob-ex {display: block; position: absolute;bottom: 100px;}
	.carfe01 .TitleArea {right:20% ;top:10% !important}
	.carfe02 .TitleArea {right:20% ;top:10% !important}
	.carfe03 .TitleArea {right:20% ;top:5% !important}
	.carfe04 .TitleArea {right:20% ;top:5% !important}
	.carfe05 .TitleArea {right:20% ;top:5% !important}
	.carfe06 .TitleArea {right:20% ;top:5% !important}
}
@media only screen and (max-width: 375px) {
	.Exhibition .TitleArea { top: 5% !important;} /*手機版時，文字、小圖區離上方的位置*/
	.Exhibition .TitleArea h1 {line-height:40px;}
}
@media only screen and (max-width: 320px) {
	.TitleArea .appier {max-width:320px;}
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
	/* bg image for mobile */
	.carfe01 {background-image: url(../../images/room2/p01_s.jpg);}
	.carfe02 {background-image: url(../../images/room2/p02_s.jpg);}
	.carfe03 {background-image: url(../../images/room2/p03_s.jpg);}
	.wrapper.App {background-position: left bottom;}
	
	.purky {position: absolute !important; margin-top: -70px;}
	.wrapper.Register {background-position-y: 100%;background-attachment: scroll;}
	.form-title {width: 35% !important;float:left !important;}
	.form-name {width: 65% !important;float:left !important;}
}

/* IE 10 & 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	.Exhibition .carfe01 .TitleArea, .Exhibition .carfe02 .TitleArea, .Exhibition .carfe03 .TitleArea, .Exhibition .carfe04 .TitleArea, .Exhibition .carfe05 .TitleArea, .Exhibition .carfe06 .TitleArea {margin-top:10% !important;}
}