@charset "utf-8";
@font-face {
    font-family: MyriadPro-Light;
    src: url(../fonts/MyriadPro-Light.otf);
}
@font-face {
    font-family: MyriadPro-Semibold;
    src: url(../fonts/MyriadPro-Semibold.otf);
}

@font-face {
    font-family: Phenomena-Regular;
    src: url(../fonts/Phenomena-Regular.otf);
}

@font-face {
    font-family: Phenomena-Bold;
    src: url(../fonts/Phenomena-Bold.otf);
}

@font-face {
    font-family: MHeiHK-Medium;
    src: url(../fonts/MHeiHK-Medium.otf);
}

@font-face {
    font-family: MHeiHK-Light;
    src: url(../fonts/MHeiHK-Light.otf);
}

body{
	font-family: 'MyriadPro-Light', Arial, "MHeiHK-Light", "微軟正黑體";
	font-style:normal;
	font-size:14px;
	line-height:18px;
	margin:0px auto 0px auto;
	padding:0;
	height:100%;
	color:#505050;
	background-color:#000000;
	
	overflow:hidden;
}

a{
	text-decoration:none;
}

p{
	margin:0 0 10px 0;
}


/* header */
header{
	
	background-color:#22201e;
	border-bottom:2px solid #ffffff;
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

#home header{
	background-color:#ffffff;
}


.sub_submenu_first{
	margin-top:0;
}



.exhibition_close{
	margin-top: 0;
}

#menu_visitors,
#menu_exhibition{
	width:100px;
}


#submenu_visitors{
	width:180px;
	left:calc(50% - 90px);
	z-index:20;
}

#submenu_exhibition{
	width:360px;
	left:calc(50% - 180px);
	z-index:10;
}

.submenu .first_li{
	padding-top:25px;
}

.submenu .last_li{
	padding-bottom:10px;
}

.logo{
	padding-bottom:15px;
}

.logo img{
	width:100%;
}


/* content */
#home .content{
	
	background-image:url(../images/blue_bg.jpg);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
}

#home .flexslider{
	width:100%;
	height:100%;
}

#home .flexslider .slides li{
	position:relative;
	widows:100%;
	height:100%;
}

#home .home_top_left,
#home .home_top_right,
#home .home_bottom_left,
#home .home_bottom_right{
	position:absolute;
	background-size:cover;
	background-repeat:no-repeat;
}

#home .home_top_left{
	background-image:url(../images/homepage_left_top.png);
}

#home .home_top_right{
	background-image:url(../images/homepage_right_top.png);
}

#home .home_center{
}

#home .home_bottom_left{
	background-image:url(../images/homepage_left_bottom.png);
}

#home .home_bottom_right{
	background-image:url(../images/homepage_right_bottom.png);
}

#home .home_info{
	width:100%;
	height:100%;
	background-position:center;
	background-size:auto 80%;
	background-repeat:no-repeat;
}

#home .flexslider .flex-direction-nav .flex-prev,
#home .flexslider:hover .flex-direction-nav .flex-prev,
#home .flexslider .flex-direction-nav .flex-next,
#home .flexslider:hover .flex-direction-nav .flex-next{
	display:none;
}

.content{
	background-color:#000000;
	color:#ffffff;
	height:calc(100% - 164px);
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.no_lr{
	display:block;
	
}




#news .news_container{
	background-color:#999;
	margin:50px auto 0 auto;
}

.left{
	width:55%;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

#visitors .left{	
	background-image:url(../images/vistors.jpg);
}

#book_a_visit .left{
	background-image:url(../images/book_a_visit.jpg);
}

#about_the_exhibition .left{
	background-image:url(../images/about_the_exhibition.jpg);
}

#credits .left{
	background-image:url(../images/credits.jpg);
}




h1{
	color:#ffffff;
	font-size:28px;
	line-height:32px;
	margin:0 0 20px 0;
	font-weight:normal;
}

hr.header_underline{
	width:100px;
	margin:10px 0 0 0;
	text-align:left;
}

.right > div, .no_lr .view_section{
	color:#cccccc;
}

.right > div  a{
	color: #fabe00;
	border-bottom: 1px solid #fabe00;
	padding-bottom:1px;
}

.col_2{
	margin-bottom:20px;
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}



.col_1{
	margin-bottom:20px;
}

#Contact-Us{
	min-height:calc(100% - 100px);
}


.p_title{
	font-family: 'MyriadPro-Semibold', Arial, "MHeiHK-Medium", "微軟正黑體";
	font-weight:bold;
}


#exhibition_section .content .flexslider .slide_container{
	height:100%;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}


.slide_container h2{
	color:#ffffff;
	font-weight:normal;
	
}

.slide_container .col_2 .col_img{
	overflow:hidden;
}

.slide_container .col_2 .col_img img{
	height:100%;
	width:auto;
	display: inline-block;
}

.slide_container .col_2 .col_desc{
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.slide_container .col_2 .col_desc p{
	width:100%;
}

.flex-to-prev-section{
	content: url('../js/flexslider/btn_prev.png');
	left: 50px;
    text-align: right;
	display: block;
    width: 36px;
    height: 64px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0.7;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.flex-to-next-section{
	content: url('../js/flexslider/btn_next.png');
	right: 50px;
    text-align: right;
	display: block;
    width: 36px;
    height: 64px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0.7;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.flex-to-prev-section:hover,
.flex-to-next-section:hover{
	opacity: 1;
}

.flex-control-nav {
  display:none;
}

#curators .flex_section{
	margin-bottom:40px;
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

#curators .flex_section .text{
	max-width:500px;
	width:100%;
}

#curators .flex_section .img{
	width:300px;
	height:300px;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

.slide_container .col_2 .col_news_media video{
	width:100%;
	height:auto;
	margin-bottom:20px;
}

.col_news_desc a{
	color:#fabe00;
}

.open_media_img{
	cursor:pointer;
	color:#fabe00;
}

.media_img{
	cursor:pointer;
}
.news_img_popup{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:100;
	cursor:pointer;
	opacity: 0;
	display:none;
}
.news_img_popup	.img_container{
	width:90%;
	max-width:800px;
	height: calc(100% - 200px);
	margin:100px auto;
	overflow:auto;
}
.news_img_popup	.img_container img{
	width:100%;
	height:auto;
}

.news_img_popup .close_btn{
	position:absolute;
	right:40px;
	top:40px;
	cursor:pointer;
}
	
/* footer */
#home footer{
	
	font-size:12px;
	background-color:#ffffff;
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

#home footer .footer_logo{
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
	
}

footer.content_footer{
	position:absolute;
	color:#ffffff;
	font-size:12px;
}


#home .footer_logo .title > img{
	height:100%;
}

#home .supported img{
	margin:0 15px 0 0;
}