@charset "utf-8";
/* 
Copyright Rocco Design Architects Limited. All rights reserved.
Credits: Site created by pill and pillow
-------------------------------------------------------------------------------------------------
Browsers: IE7+, Firefox, Google Chrome, Safari
-------------------------------------------------------------------------------------------------
*/

/*==========Common Styles==========*/
*,html {font-size: 100%; line-height:18px; -webkit-text-size-adjust: none; } 
body {margin: 0; padding: 0; 
font-family: "proxima-nova-1","proxima-nova-2",Arial,sans-serif,STHeiti,"Microsoft JhengHei", \534E\6587\9ED1\4F53, \9ED1\4F53;
overflow-x: hidden;overflow-y: auto;
}
body.en {font-size: 100%;} /* English text: 100% */
body.zh {font-size: 110%;} /* Chinese text (both simplified and traditional): 110% */

body.zh {font-family: "微軟正黑體", "Microsoft JhengHei"}
body.ch {font-family: "微軟正黑體", "Microsoft JhengHei"}


form, ul, li, h1, h2, h3, h4, h5, h6, p {margin: 0;padding: 0;}
ul {list-style-type: none;}
a{color: #333;cursor:pointer;text-decoration: none;}
a:hover {color: #000;text-decoration: underline;}
a img{border: 0;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

/*
Relative font sizes is used. Here's the conversion between px and em:
10px: 0.625em
11px: 0.688em
12px: 0.75em
13px: 0.813em
14px: 0.875em
15px: 0.938em
16px: 1em
*/


h1, h2, h3, h4, h5, h6{font-weight: normal;}
p{padding-bottom: 18px;}
.size10{font-size:0.625em;}
.size11{font-size:0.688em;}
.size12{font-size:0.75em;}
.size13{font-size:0.813em;}
.size14{font-size:0.875em;}
.size15{font-size:0.938em;}
.size16{font-size:1em;}
.white{color:#FFF;}
.lightgrey{color:#CCC;}
.darkgrey{color:#333;}
.black{color:#000;}

/*==========Logo==========*/
#logo{background: url(../assets/rocco_logo_n.png) top left no-repeat; width: 120px; height: 39px; display: block; position: fixed; right: 20px; top: 20px;z-index: 200; background-position-x: 0px;cursor: pointer;
}

/*==========Buttons: Toggle==========*/
/*---en---*/
#btn_toggle_images{display: block; cursor: pointer; height: 15px; background-position: 0 0; margin-right: 5px;}
#btn_toggle_images.en{background-image: url(../assets/btn_toggle_en.png); width: 61px;}
#btn_toggle_images.ch{background-image: url(../assets/btn_toggle_ch.png); width: 42px;}
#btn_toggle_images.zh{background-image: url(../assets/btn_toggle_zh.png); width: 42px;}
#btn_toggle_images.on,a#btn_toggle_images.on, a#btn_toggle_images:hover{background-position: -100px 0;}
/**/
#btn_toggle_list{display: block; cursor: pointer; height: 15px; background-position: -200px 0; margin-right: 5px;}
#btn_toggle_list.en{background-image: url(../assets/btn_toggle_en.png); width: 37px;}
#btn_toggle_list.ch{background-image: url(../assets/btn_toggle_ch.png); width: 38px;}
#btn_toggle_list.zh{background-image: url(../assets/btn_toggle_zh.png); width: 38px;}
#btn_toggle_list.on,a#btn_toggle_list.on, a#btn_toggle_list:hover{background-position: -300px 0;}
/**/
#btn_toggle_gallery{display: block; cursor: pointer; height: 15px; background-position: -400px 0; margin-right: 5px;}
#btn_toggle_gallery.en{background-image: url(../assets/btn_toggle_en.png); width: 66px;}
#btn_toggle_gallery.ch{background-image: url(../assets/btn_toggle_ch.png); width: 41px;}
#btn_toggle_gallery.zh{background-image: url(../assets/btn_toggle_zh.png); width: 41px;}
#btn_toggle_gallery.on,a#btn_toggle_gallery.on, a#btn_toggle_gallery:hover{background-position: -500px 0;}
/**/
#btn_toggle_info{display: block; cursor: pointer; width: 85px; height: 15px; background-position: -600px 0; margin-right: 5px;}
#btn_toggle_info.en{background-image: url(../assets/btn_toggle_en.png); width: 39px;}
#btn_toggle_info.ch{background-image: url(../assets/btn_toggle_ch.png); width: 37px;}
#btn_toggle_info.zh{background-image: url(../assets/btn_toggle_zh.png); width: 37px;}
#btn_toggle_info.on,a#btn_toggle_info.on, a#btn_toggle_info:hover{background-position: -700px 0;}

/*==========Buttons: Misc==========*/
#btn_backtoindex{display: block; cursor: pointer; height: 11px;background-repeat: no-repeat;}
#btn_backtoindex.en{background-image: url(../assets/btn_misc_en.png); background-position: 0 0; width: 94px;}
#btn_backtoindex.ch{background-image: url(../assets/btn_misc_ch.png); background-position: 0 0; width: 57px;}
#btn_backtoindex.zh{background-image: url(../assets/btn_misc_zh.png); background-position: 0 0; width: 57px;}


#btn_viewproject{display: block; cursor: pointer; height: 11px;background-repeat: no-repeat;}
#btn_viewproject.en{background-image: url(../assets/btn_misc_en.png); background-position: 200px 0; width: 87px;}
#btn_viewproject.ch{background-image: url(../assets/btn_misc_ch.png); background-position: 200px 0; width: 67px;}
#btn_viewproject.zh{background-image: url(../assets/btn_misc_zh.png); background-position: 200px 0; width: 67px;}


#btn_googlemap{display: block; cursor: pointer; height: 11px;background-repeat: no-repeat;}
#btn_googlemap.en{background-image: url(../assets/btn_misc_en.png); background-position: 100px 0; width: 80px;}
#btn_googlemap.ch{background-image: url(../assets/btn_misc_ch.png); background-position: 100px 0; width: 79px;}
#btn_googlemap.zh{background-image: url(../assets/btn_misc_zh.png); background-position: 100px 0; width: 79px;}

/*==========Buttons: Controls==========*/
#control_wrapper{z-index: 50;
}
#btn_prev{display: block; cursor: pointer; width: 30px; height: 31px; background-image: url(../assets/btn_controls.png); background-position: 0 0;top: -15px;position: absolute;}
#btn_next{display: block; cursor: pointer; width: 30px; height: 31px; background-image: url(../assets/btn_controls.png); background-position: 60px 0;top: -15px;position: absolute;}

#btn_prev_wrapper{
	position: fixed;
	left: 10px;
	top: 50%;
	z-index: 50;
}
#btn_next_wrapper{
	position: fixed;
	right: 30px;
	top: 50%;
	z-index: 50;
}


#btn_close{display: block; cursor: pointer; width: 30px; height: 31px; background-image: url(../assets/btn_controls.png); background-position: 30px 0;}

#btn_close_wrapper{
	position: fixed;
	right: 20px;
	top: 110px;
	z-index: 50;
}
#btn_back_wrapper{
	position: fixed;
	right: 20px;
	top: 110px;
	z-index: 50;
}

/*==========Buttons: Small Controls==========*/
#btn_up{cursor: pointer; width: 11px; height: 6px; background-image: url(../assets/btn_smallcontrols.png); background-position: 0 0;position: relative;text-align: center;vertical-align: middle;float: none;
}
#btn_down{cursor: pointer; width: 11px; height: 6px; background-image: url(../assets/btn_smallcontrols.png); background-position: 20px 0;position: relative;text-align: center;vertical-align: middle;float: none;
}

.smallControlBtn{
	position: absolute;
	display: table;
	width: 20px;
	height: 16px;
	vertical-align: middle;
	text-align: center;
	z-index: 20;
}
.centerBtn{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	position: relative;
	float: none;
}

#hiddenScroll{
	position: absolute;
	height: 200px;
	width:  200px;
}
#top_wrapper{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: #FFF;
	height: 130px;
	z-index: 10;
}
#nav_wrapper{
	position: fixed;
	top: 20px;
	left: 22px;
	font-size: 12px;
	z-index: 1001;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}
.nav_group{
	padding-left: 14px;
	padding-right: 14px;
	background-color: #000;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-right: 1px;
	float: left;
}
.nav_item{
	color: #999;
	background-color: #000;
	padding-top: 2px;
	padding-bottom: 2px;
	cursor: pointer;
}
#lang_wrapper{
	position: fixed;
	bottom: 20px;
	left: 22px;
	font-size: 12px;
	z-index: 1020;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}
.lang_group{
	padding-left: 14px;
	padding-right: 14px;
	background-color: #FEFEFE;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-right: 1px;
	margin-left: 0px;
	float: left;
	border: 1px solid #000;
}
.lang_item{
	color: #777;
	background-color: #FEFEFE;
	padding-top: 2px;
	padding-bottom: 2px;
	cursor: pointer;
}


#indexSwitch_wrapper{
	position: fixed;
	left: 22px;
	top: 100px;
	z-index: 90;
}
#postSwitch_wrapper{
	position: fixed;
	left: 22px;
	top: 100px;
	z-index: 91;
}

.tr_group{
	position: absolute;
	padding-left: 14px;
	padding-right: 14px;
	background-color: #000;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-right: 1px;
	float: left;
}
.tr_group.lang{
	margin-left: 5px;
}
.tr_item{
	position: absolute;
	color: #FFF;
	background-color: #000;
	padding-top: 2px;
	padding-bottom: 2px;
	cursor: pointer;
}

.nav_item.over, .nav_item.selected, .lang_item.over, .lang_item.selected{
	color: #FFF;
}
.nav_item a{
	color: #999;
	text-decoration: none;
}
.nav_item a:hover{
	color: #FFF;
	text-decoration: none;
}
.lang_item.over, .lang_item.selected{
	color: #000;
}
.lang_item a{
	color: #777;
	text-decoration: none;
}
.lang_item a:hover{
	color: #000;
	text-decoration: none;
}
/**/
#content_wrapper{
	position: absolute;
	left: 22px;
	top: 160px;
	width: 570px;
	z-index: -10;
}
#content_wrapper h1{
	font-size: 14px;
	margin-bottom: 20px;
	font-weight: bold;
}
/*paragraph*/
#content_wrapper p{
	font-size: 14px;
	margin-bottom: 5px;
	margin-top: 5px;
}
/*data*/
#content_wrapper h3{
	font-size: 14px;
	margin-bottom: 5px;
}
/*caption*/
#content_wrapper h4{
	font-size: 10px;
	margin-bottom: 5px;
}
#content_wrapper sup{
	font-size: 7px;
}
#content_wrapper a{
	color: #ae4924;
}
#content_wrapper a.c0{
	color: #000;
}
/**/
#gallery_wrapper{
	position: absolute;
	left: 0px;
	top: 0px;
	width: auto;
	height: auto;
	z-index: 20;
}
.detailItem{
	position: relative;
	float: left;
}
.detailItem img{
	cursor: pointer;	
}
img.content{
	margin-top: 28px;
	margin-bottom: 2px;
}
/*people*/
#people_box_wrapper{
	position: fixed;
	top: 170px;
	left: 110px;
}

#people_content_wrapper{
	position: absolute;
	font-size: 14px;
	width: 440px;
	top: 240px;
	left: 345px;
}
#people_quali_wrapper{
	position: fixed;
	width: 220px;
	top: 240px;
	left: 800px;
	font-size: 14px;
}
/*next*/
#next_wrapper{
	position: fixed;
	right: 20px;
	width: 80px;
	height: 18px;
	background-color: #FFFFFF;
	overflow: hidden;
	bottom: 10px;
	margin: 5px;
	z-index: 1012;
	font-size: 11px;
	margin-bottom: 12px;
	float: left;
	text-align: right;
}
/*news*/
#news_wrapper{
	position: fixed;
	left: 100px;
	width: 1000px;
	height: 18px;
	background-color: #FFFFFF;
	overflow: hidden;
	bottom: 10px;
	margin: 5px;
	z-index: 1011;
}
#news_buttons_wrapper{
	position: fixed;
	bottom: 30px;
	width: 140px;
	height: 16px;
	margin-bottom: 12px;
	z-index: 1010;
	background-color: #FFF;
}
#news_buttons_wrapper h1{
	font-size: 12px;
	margin-bottom: 12px;
	float: left;
	font-weight: bold;
	color: #ae4924;
}
.news_group{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1000px;
	height: auto;
}
.news_group .bar{
	text-align: center;
}
/**/
#box_wrapper{
	position: fixed;
}
#box_layer{
	position: absolute;
	overflow-y: hidden;
}
.box{
	position: absolute;
	width: 100px;
	height: 1445px;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.exitBox{
	position: absolute;
	width: 100px;
	height: 445px;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.boxGroup{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 0px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000;
	overflow: hidden;
	cursor: pointer;
}
.boxBase, .boxBase.color{
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.boxBase.color{
	display: none;
}
.box.norepeat{
	background-repeat: no-repeat;
}
.boxCover{
	color: #FFF;
	position: absolute;
	background-color: #000;
	width: 220px;
	top: 0px;
	height: auto;
}
.boxCover h1{
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
/*boxCover h1 of news*/
.boxCover h4{
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
}
.boxCover h2{
	margin-left: 10px;
	margin-right: 20px;
	margin-bottom: 5px;
	font-size: 12px;
	text-decoration: none;
}
.boxCover h3{
	position: absolute;
	margin-left: 10px;
	margin-bottom: 5px;
	font-size: 10px;
	text-decoration: none;
	bottom: 5px;
}
.boxInfo{
	position: absolute;
	width: 220px;
	background-color: #000;
	top: 405px;
	cursor: pointer;
}
.boxInfo h1{
	margin: 10px;
	color: #FFF;
	font-size: 10px;
	text-decoration: none;
}
#box_wrapper a:hover{
	text-decoration: none;
}
.videoButton{
	background-image: url(../assets/videoButton.png); 
	width: 40px;
	height: 40px;
	position: absolute;
	top: 130px;
	left: 92px;
}
#bar_wrapper{
	position: absolute;
	top: 150px;
	left: 22px;
	z-index: -10;
}
.bar h1{
	font-size: 13px;
	margin-bottom: 12px;
}
/*map*/
#contactMap{
	position: relative;
	margin-top: 30px;
}
/*landing*/
#landing_wrapper{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#landing_image{
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: top left;
}
#landing_line, #landing_line p, #landing_line a{
	position: fixed;
	bottom: 160px;
	right: 80px;
	width: 190px;
/*	height: 300px;*/
	height: auto;
	font-size: 22px;
	line-height: 30px;
	padding: 15px;
	background-color: #000;
	color: #FFF;
	text-decoration: none;
	padding-bottom: 20px;
}
#landing_line:hover, #landing_line p:hover, #landing_line a:hover{
	text-decoration: none;
	color: #FFF;
}
#landing_image:hover, #landing_image p:hover, #landing_image a:hover{
	text-decoration: none;
}
/*loading*/
#loadingB{
	position: fixed;
	background-image: url(../assets/loading_big.gif);
	width: 18px;
	height: 22px;
	top: 110px;
	left: 22px;
	display: none;
	z-index: 15;
}
.imgLoading{
	position: fixed;
	background-image: url(../assets/loading_big.gif);
	width: 18px;
	height: 22px;
	z-index: 15;
}
.next_arrow{
	position: relative;
	display: block;
	width: 10px;
	height: 16px;
	background-image: url(../assets/btn_controls_small.png);
	background-position: -15px 0px;
	margin-left: 7px;
	margin-top: 2px;
	float: right;
}
#copyright{
	position: fixed;
	font-size: 12px;
	right: 80px;
	bottom: 20px;
	color: #666;
}
/**/
.template{
	display: none;
}
/**/
.on .loadingCache{
	background-image: url(../assets/loading_big.gif);
	width: 18px;
	height: 22px;
	display: none;
	float: left;
}