@charset "utf-8";

/****************Master*********************/
* {border:0; margin:0;}
html {font-size:16px;}
body {margin:0 auto; background-color:#FFF; position:relative; line-height:1; min-width:950px;}
.fontsize-s {font-size:100%;}
.fontsize-m {font-size:115%;}
.fontsize-l {font-size:125%;}


/****************Common class*********************/
h1,h2,h3,h4,h5.h6 {line-height:1;}
p {margin:0 0 1em 0;}

a {text-decoration:none;}
a:hover {text-decoration:underline;}

.clear {clear:both;}
/* For modern browsers */
.clearfix:before, .clearfix:after {content:''; display:table;}
.clearfix:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {*zoom:1;}

.fullwidth {width:1200px; margin:0 auto; text-align:left; position:relative;}
.justify  {text-align:justify;}
.access   {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;}

.right {float:right;}
.left {float:left;}


/****************Wrap Layout*********************/
#header {/*height:120px;*/}

#header .logos {/*position:absolute; top:12px; left:0px;*/ background:url(../img/logos.png) no-repeat; width:400px; height:54px; margin-top:13px; margin-bottom:13px; float:left; position: relative;;}
#header .logos .logos-emsd {display:block; position:absolute; width:120px; height:60px; top:0; left:0;}
#header .logos .logos-hkie {display:block; position:absolute; width:160px; height:60px; top:0; left:135px;}
#header .logos .logos-safety {display:block; position:absolute; width:40px; height:60px; top:0; left:135px;}

#header .topbar {/*position:absolute; right:0; top:25px;*/ line-height:25px; font-size:70%; float:right; margin-top:25px;}
#header .topbar, #header .topbar a {color:#808284;}
#header .topbar>* {float:left; display:block;}
#header .topbar .spacer {padding:0 7px;}
#header .topbar .changeLang, #header .topbar .fontsize, #header .topbar .home, #header .topbar .music , #header .topbar .changeColor 
{background:url(../img/color-white/topbar-btns.png) no-repeat; width:25px; height:25px; margin-left:2px;}

#header .topbar .changeColor {margin-left:0px;}
#header .topbar #to-color-white {background-position:-175px 0;}
#header .topbar #to-color-yellow {background-position:-200px 0;}
#header .topbar #to-color-orange {background-position:-225px 0;}
#header .topbar #to-color-black {background-position:-250px 0;}
#header .topbar #to-color-white:hover, #header .topbar #to-color-white.on {background-position:-175px -25px;}
#header .topbar #to-color-yellow:hover, #header .topbar #to-color-yellow.on {background-position:-200px -25px;}
#header .topbar #to-color-orange:hover, #header .topbar #to-color-orange.on {background-position:-225px -25px;}
#header .topbar #to-color-black:hover, #header .topbar #to-color-black.on {background-position:-250px -25px;}

#header .topbar #to-fontsize-s {background-position:-100px 0;}
#header .topbar #to-fontsize-m {background-position:-125px 0;}
#header .topbar #to-fontsize-l {background-position:-150px 0;}
#header .topbar #to-fontsize-s:hover, #header .topbar #to-fontsize-s.on {background-position:-100px -25px;}
#header .topbar #to-fontsize-m:hover, #header .topbar #to-fontsize-m.on {background-position:-125px -25px;}
#header .topbar #to-fontsize-l:hover, #header .topbar #to-fontsize-l.on {background-position:-150px -25px;}

#header .topbar .to-lang-tc {background-position:-50px 0;}
#header .topbar .to-lang-tc:hover, #header .topbar .to-lang-tc.on {background-position:-50px -25px;}
#header .topbar .to-lang-en {background-position:-75px 0;}
#header .topbar .to-lang-en:hover, #header .topbar .to-lang-en.on {background-position:-75px -25px;}

#header .topbar .home:hover {background-position:0px -25px;}
#header .topbar .music {background-position:-25px -25px;}
#header .topbar .music.off {background-position:-25px 0px;}
#musicFrame {width:1px; height:1; border:0; position:absolute; top:-1000px;}

#header #mainmenu {z-index:100; width:100%; font-size:85%; position:relative; margin-bottom:35px; }
.page-index #header #mainmenu {margin-bottom:0;}
#header #mainmenu>.line2 { min-height:35px; line-height:35px; text-align:center;}
#header #mainmenu>.line2>* {}
#header #mainmenu>.line2 .spacer {position:absolute;}
#header #mainmenu>.line2 a { display:inline-block; padding:0 10px; position:relative;}
#header #mainmenu>.line2 .on {}
#header #mainmenu>.line2 a.on:after {content:' '; position:absolute; width:100%; height:4px; left:0; bottom:-2px;}
#header #mainmenu>.line3 { line-height:35px; text-align:center; position:absolute; left:0; width:100%;}
#header #mainmenu>.line3[data-submenu="game"] {}
#header #mainmenu>.line3 .inner {}
#header #mainmenu>.line3:after  {content:' '; position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;}
#header #mainmenu>.line3 .spacer {position:absolute;}
#header #mainmenu>.line3 a { display:inline-block; padding:0 10px; position:relative;}
#header #mainmenu>.line3 .on {}
#header #mainmenu>.line3 a.on:after {content:' '; position:absolute; width:100%; height:4px; left:0; bottom:-2px;}
#header #mainmenu .submenu {}

#topVisual {height:280px; margin-bottom:20px; position:relative;}
#topVisual .bird {position:absolute; width:100px; height:120px; left:840px; top:120px; }
#topVisual .superman {position:absolute; width:300px; height:200px; left:-110px; top:30px;}


#footer  {font-size:75%; line-height:1.5; padding:10px 0; text-align:center; position:relative;}
#footer a {display:inline-block; padding:0 5px;}
#footer .w3icon {position:absolute; right:20px;}

#pageMain {min-height:240px;}


/****************Main layout*********************/
#pageMain {font-size:93.75%; line-height:1.5; background:url(../img/bg-bottom2020.png) no-repeat bottom center;}
#pageMain big, #pageMain .big {font-size:120%;}
#pageMain .bigger {font-size:140%;}
#pageMain small, #pageMain .small {font-size:90%;}
#pageMainL {font-size:93.75%; line-height:1.5; background:url(../img/bg-bottomL2020.png) no-repeat bottom center;}
#pageMainL big, #pageMain .big {font-size:120%;}
#pageMainL .bigger {font-size:140%;}
#pageMainL small, #pageMain .small {font-size:90%;}
.content {/*width:480px; */padding-bottom:480px; padding-top:70px; padding-left:50px;}
.page-index .content {padding-left:0;}
.content h1 {height:50px; line-height:50px; margin:0 0 35px 0; font-size:170%;}
.content h1>span {display:inline-block; position:relative; min-width:750px;
 margin-left:-35px; padding-left:125px; background-position:left center; background-repeat:no-repeat;}
.content h1>span>.h1-character {position:absolute; top:-35px; margin-left:20px; left:0;}

.content h3 {font-size:1.3em; line-height:1.5; margin:20px 0 3px;}
.content .table td {padding:5px 7px; /*vertical-align:top;*/ min-width:80px; }


/*.content .alt-table td {padding:4px 7px; vertical-align:top; min-width:80px; }*/

/****************Page*********************/

.page-index #pageMain {/* background:url(../img/bg-bottom-index.png) no-repeat bottom center;*/}
.page-index .content {width:650px;}
.index-box {padding:0px 150px 30px 20px; width:450px;}
.index-carnival-logo  {position:absolute; right:0; top:70px; z-index:3;}
.index-add-box {margin:0 0 0 30px; border-radius:15px; padding:55px 15px 15px 30px; width:330px; position:relative;}
.index-add-box .title {position:absolute; top:0px; font-weight:bold; letter-spacing:1px; line-height:1.5; padding-left:20px; padding-top:2px;}
.index-add-box .robot {position:absolute; top:-40px; left:-40px; z-index:2;}


.page-game .btn1, .page-game .btn2 {display:inline-block; top:0;}

.page-other .main {position:relative; height:350px;}
.page-other .main>a {position:absolute; display:block; width:212px; height:62px; padding-top:150px; background-repeat:no-repeat; text-align:center;}
.page-other .main>a.b1 {left:0; top:0px; background-position:0 0;}
.page-other .main>a.b2 {left:280px; top:0px; background-position:0 -250px;}

.page-carnival .highlight {font-size:180%;}


/****************Unit*********************/
.h5 {height:5px;}
.h10  {height:10px;}
.h20  {height:20px;}
.h30  {height:30px;}
.h40  {height:40px;}
.h50  {height:50px;}
.h60  {height:60px;}
.h70  {height:70px;}
.h80  {height:80px;}
.h250  {height:250px;}

.w100 {width:100px;}
.w150 {width:150px;}
.w200 {width:200px;}
.w250 {width:250px;}
.w300 {width:300px;}
.w350 {width:350px;}
.w400 {width:400px;}
.w450 {width:450px;}
.w500 {width:500px;}
.w550 {width:550px;}
.w600 {width:600px;}
.w650 {width:650px;}
.w700 {width:700px;}
.w750 {width:750px;}

.padding-top-5 {padding-top:5px;}
.padding-top-10 {padding-top:10px;}
.padding-top-15 {padding-top:15px;}
.padding-top-20 {padding-top:20px;}
.padding-top-25 {padding-top:25px;}
.padding-top-30 {padding-top:30px;}
.padding-top-35 {padding-top:35px;}

.padding-right-5 {padding-right:5px;}
.padding-right-10 {padding-right:10px;}
.padding-right-15 {padding-right:15px;}
.padding-right-20 {padding-right:20px;}
.padding-right-25 {padding-right:25px;}
.padding-right-30 {padding-right:30px;}
.padding-right-35 {padding-right:35px;}

.padding-left-5 {padding-left:5px;}
.padding-left-10 {padding-left:10px;}
.padding-left-15 {padding-left:15px;}
.padding-left-20 {padding-left:20px;}
.padding-left-25 {padding-left:25px;}
.padding-left-30 {padding-left:30px;}
.padding-left-35 {padding-left:35px;}


.padding-all-5 {padding:5px;}
.padding-all-10 {padding:10px;}
.padding-all-15 {padding:15px;}
.padding-all-20 {padding:20px;}


/*********** popup ***********/
#popup {
	width:100%;
	height:100%;
	z-index:1000;
	position:fixed;
	overflow:hidden;
	background:rgba(30,30,30,.8);
}
#popup .message {
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);

	max-width:900px;
	width:90%;
	padding:30px 20px 20px 20px;
	border:6px solid #97a8af;
	background:#FFF;

	font-size:120%;
	line-height:1.4;
}
#popup .btn-close {
	font-size:35px;
	position:absolute;
	z-index:1001;
	right:-20px;
	top:-20px;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center; 
	cursor:pointer;
	background:#555b63;
	color:#FFF;
	border-radius:50%;
}
#popup .btn-close:hover {
	text-decoration:none;
}