/* common
======================================================================*/
body {
	padding-top:70px;
}

nav#main_menu {
	position:fixed;
	left:0;
	top:0;
	z-index:1000;
	width:100%;
	height:70px;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
	background-color:#FAFFBD;
	border-bottom:1px solid #888888;
}

nav#main_menu a:hover {
	text-decoration:none;
}

nav#main_menu .logo {
	display:block;
	float:left;
	margin-left:30px;
	margin-top:12px;
	width:388px;
	height:50px;
	background:url(../../img/logo_en.svg) no-repeat top left;
	background-size:cover;
	text-indent:-999999px;
}

nav#main_menu .logo-cht {
	background:url(../../img/logo_cht.svg) no-repeat top left;
	background-size:cover;
}

/* big
======================================================================*/
nav#main_menu.big button.open,
nav#main_menu.big button.close {
	display:none;
}

nav#main_menu.big .menu-scenery,
nav#main_menu.big .list-scenery {
	display:none;
}

/* language ----------------------------------------------------------*/
nav#main_menu.big .btn-lang {
	position:absolute;
	right:17px;
	top:18px;
}

nav#main_menu.big .btn-lang i {
	color:#888888;
	font-size:32px;
}

/* menu list ---------------------------------------------------------*/
nav#main_menu.big .menu_list {
	float:right;
}

nav#main_menu.big .menu_list ul {
	padding:0;
	margin-top:22px;
	margin-right:45px;
}

nav#main_menu.big .menu_list li {
	position:relative;
	list-style:none;
	float:left;
	margin:0 5px;
}

nav#main_menu.big .menu_list li > a {
	padding:5px 15px;
	color:#000000;
}

nav#main_menu.big .menu_list li.active > a,
nav#main_menu.big .menu_list li:hover > a {
	background-color:#FF0000;
	color:#FFFFFF;
}

nav#main_menu.big .menu_list li:hover div.item-scenery,
nav#main_menu.big .menu_list li:hover div.menu_item {
	display:block;
}

/* menu item ---------------------------------------------------------*/
nav#main_menu.big .menu_list li .item-scenery {
	display:none;
	position:absolute;
	left:0;
	top:25px;
	z-index:0;
	opacity:0.9;
	background-color:#FFFFFF;
}

nav#main_menu.big .menu_list li div.menu_item {
	display:none;
	position:absolute;
	left:0;
	top:25px;
	z-index:10;
	white-space:nowrap;
}

nav#main_menu.big .menu_list li div.menu_item a {
	display:block;
	padding:0 38px;
	width:100%;
	line-height:35px;
	text-align:left;
	color:#000000;
}

nav#main_menu.big .menu_list li div.menu_item a:hover {
	background-color:#FFFFFF;
}


/* small
======================================================================*/
/* language ----------------------------------------------------------*/
nav#main_menu.small .btn-lang {
	position:absolute;
	right:83px;
	top:18px;
}

nav#main_menu.small .btn-lang i {
	color:#FF6666;
	font-size:32px;
}

/* button open -------------------------------------------------------*/
nav#main_menu.small button.open span {
	position:absolute;
	left:0;
	top:8px;
	display:block;
	width:30px;
	height:2px;
	background-color:#FF0000;
	text-indent:-999999px;
}

nav#main_menu.small button.open:before {
	position:absolute;
	left:0;
	top:0;
	width:30px;
	height:2px;
	background-color:#FF0000;
	content: '';
}

nav#main_menu.small button.open {
	position:relative;
	right:0;
	top:25px;
	float:right;
	margin-right:30px;
	width:30px;
	height:20px;
	cursor:pointer;
	background-color:transparent;
	border:0;
}

nav#main_menu.small button.open:after {
	position:absolute;
	left:0;
	top:16px;
	width:30px;
	height:2px;
	background-color:#FF0000;
	content: '';
}

nav#main_menu.small button.open:focus {
	outline:none;
}

/* button close ------------------------------------------------------*/
nav#main_menu.small button.close span {
	position:absolute;
	left:0;
	top:14px;
	display:block;
	width:30px;
	height:2px;
	background-color:#FFFFFF;
	text-indent:-999999px;
}

nav#main_menu.small button.close {
	display:none;
	position:relative;
	right:-35px;
	top:0;
	z-index:20;
	margin-top:5px;
	width:30px;
	height:30px;
	cursor:pointer;
	transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
	background-color:transparent;
	border:0;
}

nav#main_menu.small button.close:after {
	position:absolute;
	left:0;
	top:14px;
	width:30px;
	height:2px;
	transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
	background-color:#FFFFFF;
	content: '';
}


nav#main_menu.small button.close:focus {
	outline:none;
}

/* menu list ---------------------------------------------------------*/
nav#main_menu.small .menu-scenery {
	display:none;
	position:absolute;
	left:0;
	top:0;
	z-index:5;
	width:100vw;
	height:100vh;
	opacity:0.8;
	background-color:#FFFFFF;

}

nav#main_menu.small .list-scenery {
	display:none;
	position:absolute;
	right:0;
	top:0;
	z-index:10;
	opacity:0.8;
	background-color:#000000;
	width:280px;
	height:100vh;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
}

nav#main_menu.small .menu_list {
	display:none;
	position:fixed;
	right:0;
	top:0;
	z-index:15;
	width:280px;
	height:100vh;
	overflow-y:scroll;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
}

nav#main_menu.small .menu_list ul {
	padding:0;
}

nav#main_menu.small .menu_list li {
	list-style:none;
	margin-bottom:10px;
}

nav#main_menu.small .menu_list li > a {
	display:block;
	padding-left:30px;
	color:#FFFFFF;
	border-bottom:1px solid #CECECE;
	line-height:40px;
	font-size:16px;
}

nav#main_menu.small .menu_list li:hover > a {
	color:#FFCECE;
	border-bottom:1px solid #FFCECE;
}

/* menu item ---------------------------------------------------------*/
nav#main_menu.small .menu_list li .item-scenery {
	display:none;
}

nav#main_menu.small .menu_list li div.menu_item a {
	display:block;
	padding-left:45px;
	color:#FFFFFF;
	line-height:40px;
	font-size:16px;
}

nav#main_menu.small .menu_list li div.menu_item a:hover {
	background-color:#FFCECE;
	color:#000000;
}


/* RWD
======================================================================*/
@media screen and (max-width: 500px) {
	/* common
	==================================================================*/
	nav#main_menu .logo {
		margin-top:20px;
		width:240px;
		height:30px;
	}
}

@media screen and (max-width: 430px) {
	/* common
	==================================================================*/
	nav#main_menu .logo {
		margin-top:22px;
		width:200px;
		height:25px;
	}
}

@media screen and (max-width: 375px) {
	/* small
	==================================================================*/
	/* language ------------------------------------------------------*/
	nav#main_menu.small .btn-lang {
		right:75px;
	}
}

@media screen and (max-width: 350px) {
	/* common
	==================================================================*/
	nav#main_menu .logo {
		margin-left:15px;
	}


	/* small
	==================================================================*/
	/* language ------------------------------------------------------*/
	nav#main_menu.small .btn-lang {
		right:60px;
	}

	/* button open ---------------------------------------------------*/
	nav#main_menu.small button.open {
		margin-right:15px;
	}
	
	/* button close --------------------------------------------------*/
	nav#main_menu.small button.close {
		right:-35px;
	}
}