html,
body {
	margin:0 auto;
	padding:0;
	width:100%;
	color: #fff;
	background-color:#466592;	
	font-size:12px;
	line-height:14px;
	font-family: "AGaramondPro", EB Garamond, Verdana, STSong, MSungHK-Light, "新細明體", "PMingLiU","FangSong", "仿宋", STFangSong, "华文仿宋", "Microsoft JhengHei", serif;

	
	 /* Microsoft JhengHei
	-webkit-user-select: none;  Chrome all / Safari all */
	/*-moz-user-select: none;      Firefox all */
	/*-ms-user-select: none;       IE 10+ */
	/*user-select: none;           Likely future */      

}
a:link  , a:visited {
	color:#fff;
	text-decoration: none;
}

a:hover , a:active  {
    color: #4652a1;
    text-decoration: none;
}

a:focus {
	color:#333;
}

/* ------ header --------*/

.headerbg {
	background-color:rgba(255,255,255, 0.85);
	height:210px;
}

.container-fluid {
	padding:0 5%;
}

.toplogo {
	padding:25px 0px;
}

.toplogo img{
	width:100%;
	max-width:350px;
}

.navBar{
	text-align:center;
	padding-top:100px;
	width:63%;
}
.navbar-nav {
	float:none;
}



#menu li a{
	color:#444;
}

#menu li a:hover{
	color:#466592;
}

#menu li {
	font-size:2em;
	padding:0 5px;
	float:none;
	display:inline-block;
}

.nav>li>a:hover {
    text-decoration: underline;
    background-color:rgba(255,255,255, 0);
    color:#2472b0;

}

.nav > li > a:focus {
	text-decoration: none;
	background-color: rgba(255,255,255, 0);
	font-weight:bold;
	color:#333;
}

.property_menu {
	padding-top:5px;
}

.property_menu li{
	display:inline-block;
	font-size:1.6em;
	padding:0px 8px;
	color:#444;
}

.property_menu li a{
	color:#444;
}

.langBar {
	text-align: right;
    padding-top: 110px;
    width: 12%;
    padding-right: 0px;
    color:#444;
}

.langBar ul li {
	display:inline-block;
	font-size:1.45em;
	padding:0px 5px;
}

.langBar ul li a{
	color:#444;
}

/* end of header */
/* ---------------------------------------------------------*/
#video_wrapper {
	width:100%;
	height:100vh;
	position:relative;
	z-index:1;
	
}

#video_wrapper .home_wp{
	width:100%;
	height:100%;
	position:relative;
	overflow: hidden;
}
/*
.home_wp video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 	background: url('../images/video_bg.jpg') no-repeat;
  	background-size: cover;
  	transition: 1s opacity;
}*/

.home_wp video { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    
    z-index: -100;
    background: url('../images/video_bg.jpg') no-repeat;
  	background-size: cover;
  	transition: 1s opacity;
    
}

.videoDisclaimer {
	position: absolute;
    bottom: 2%;
    width: 100%;
}

.videoDisclaimer p{
	width:90%;
	margin:0 auto;
	line-height:1.4em;
}

#viewer{
	width:100%;
	height:100vh;
	position:relative;
}

#viewer .iconcover{
	position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.2);
    cursor:pointer;

}

#viewer .iconcover.remove{
	display:none;
}

.iconcover img {
	width:6%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);

}

#viewer .viewerDisclaimer{
	width:100%;
	position:absolute;
	bottom:60px;
	z-index:100;
}

#viewer .viewerDisclaimer p{
	width:90%;
	margin:0 auto;
}

#location{
	width:100%;
	height:100vh;
	position:relative;
	background-color:#fff;
}

#location .gallery_container {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	padding:0;
}

#location .gallery_container .imgcover{
	padding:0;
	height:50%;
	
}

.imgcover.cover01{
	background-image:url("../images/img_thumbnail01.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover02{
	background-image:url("../images/img_thumbnail02.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover03{
	background-image:url("../images/img_thumbnail03.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover04{
	background-image:url("../images/img_thumbnail04.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover05{
	background-image:url("../images/img_thumbnail05.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover06{
	background-image:url("../images/img_thumbnail06.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover07{
	background-image:url("../images/img_thumbnail07.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.imgcover.cover08{
	background-image:url("../images/img_thumbnail08.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.img_link {
	width:100%;
	height:100%;
	background:rgba(26,78,123,.75);
    text-align:center;
    padding:45px 0 66px 0;
    opacity:0;
    -webkit-transition: opacity .25s ease;
}

.img_link .txt{
	font-size: 18px;
    line-height: 20px;
    border: 1px solid #fff;
    padding: 10px 20px;
    position: relative;
    top: 50%;
}

.img_link .txt0{
	font-size: 18px;
    line-height: 20px;
    border: 1px solid #fff;
    padding: 10px 20px;
    position: relative;
    top: 75%;
}

a:hover .img_link{
	opacity:1;
	color:#fff;
}

.gallerydisclaimer{
	position:absolute;
	z-index:10;
	bottom:2%;
	padding:0 5%;
}

.gallerydisclaimer p {
    line-height: 1.5em;
}

/*   MAP ---------------------------------------------------------*/

.map_container {
	position:relative;
	z-index:1;
	min-height:100vh;
	width:100%;
	background-color:#91d4f3;
	background-image:url("../images/bg_location.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.map {
	width:100%;
	height:100vh;
	background-image:url("../images/map_svg.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center right;

}

.map .info_wp{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0 5%;
}

.legend {

	width:40%;
	min-width:300px;
	min-height:660px;
	padding-left:120px;
	color:#444;
	padding-top:18%;
	float:left;
	margin-bottom: 0;

}

.legend h2{
	font-size:2.8em;
	line-height:1.2em;
	margin-bottom:0px;
}

.title {
	height: 40px;
    width: 300px;
    border-bottom: 1px solid #666;
    clear: both;
    box-sizing: border-box;
}

.title .icon{
	float: left;
    padding: 10px 0;
    padding-bottom:0;
}

.title h4{
	margin: 0px;
    padding: 20px;
    padding-bottom:0;
}

.legend ul {
	margin-bottom:0;
}

.legend ul li{
	width:200px;
	clear:both;
}

.legend ul li .icon_small{
	padding:2px 0px;
	float:left;
	padding-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
}

.legend ul li h5{
	padding:8px;
	margin: 0;
    padding-bottom: 5px;
    font-size: 13px;
}

.indicator{
	width: 10%;
    max-width: 65px;
    float: right;
    padding-top: 18%;
}

.mapdisclaimer {
	position: relative;
    z-index: 10;
    bottom: 2%;
    width: 100%;
    margin:0 auto;
    padding:0 5%;
    padding-top:2%;
    padding-bottom:10px;
}

.mapdisclaimer p{
	line-height:1.5em;
	color:#444;
}

.legend_bottom {
	display:none;
}

/* end of map ----------------------------------------------*/

.page-section {
	width: 100%;
	min-height: 100vh;
	background-color:#91d4f3;
}

.about_wp{
	width:100%;
	height:100%;
	background-image:url("../images/bg_mcc.jpg");
	background-size:cover;
	background-position:top center;
	position:absolute;
	z-index:1;
}

.contents {
	width:100%;
	height:100%;
	box-sizing: border-box;
    padding-top: 18%;
    color:#444;
    margin:0 auto;
    padding-left: 120px;
}

.mcclogo {
	width:20%;
	max-width:324px;
}


.d_title {
	font-size:3em;
	letter-spacing:0.15em;
	padding:15px 0;
	font-weight:800;
}

.p_text {
	font-size:1.35em;
	line-height:1.4em;
	padding:0;
	text-align:justify;
}

.bg_dis {
	position:absolute;
	z-index:10;
	bottom:2%;
	width:90%;
}

.img_name {
	float:right;
	text-align:right;
	padding:0;
}

.dis_text {
	line-height:1.5em;
	padding:0;
}

#disclaimer {
	width:100%;
	height:100%;
	background-color:#91d4f3;
	position:absolute;
	z-index:1;
}

#disclaimer .contactInfo {
	width:100%;
	height:120px;
	position:relative;
	top:210px;
	background-color:#fff;
	z-index:1;
	padding:20px 0px;
}

.disclaimer_txt{
	width:100%;
	height:75%;
	position:relative;
	top:210px;
	background:url("../images/bg.jpg");
	background-size:cover;

}

.txt_wrapper {
	width:90%;
	max-width:1920px;
	margin:0 auto;
}

#disclaimer .contactInfo h1 {
	float:left;
	color:#4d7498;
	padding: 10px 0;
    font-size: 30px;
}

.logomcc{
	float:right;
	width: 25%;
    max-width: 300px;
    padding-top: 10px;
}

.disclaimer_txt p {
	padding: 50px 0px 20px 0px;
    font-size: 16px;
    line-height: 25px;
    text-align:justify;
}

.disclaimer_txt p.copyright{
	padding-top:0;
}

/*------ data page ----------------------------*/
.data-section {
	width: 100%;
	min-height: 100vh;
	background-color:#91d4f3;
	background:url("../images/bg.jpg");
	background-size:cover;
}


.data_wp {
	width: 90%;
    height: 85%;
    margin: 0 auto; 
    position: absolute;
    clear: both;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	padding-top:15%;
	box-sizing: border-box;

}

.data_wp .left{
	float:left;
	width:50%;
	padding-left:120px;

}

.data_wp .right{
	float:right;
	width:50%;
	height:400px;
	padding-right:120px;
	padding-left:20px;
	border-left:1px solid #fff;
	font-size:16px;
}

.data_contents {
	width:100%;
}

.data_contents .row{
	margin:0;
	margin-top:5px;
}

.data_contents .row .rowtopic {
	height: 40px;
    padding: 10px;
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 20px;
}

.data_contents .row.datarow {
	height:50px;
	border-bottom:1px solid;
	margin-bottom:15px;
}

.data_contents .row .rowdate {
	padding-bottom: 12px;
	font-size:14px;
}

.datarow .filetitle {
	float: left;
    font-size: 18px;
}

.datarow .Dicon {
	 width: 32px;
    float: right;
    padding-right: 10px;
}


/*--------------- end of data page ---------------*/

@media screen and (min-width: 1800px){ 
	.data_wp { 
		padding-top:12%;
	}

}

@media screen and (max-width: 1440px){
	.headerbg {
    
    	height: 190px; 
	}

	#menu li {
    	font-size: 22px; 
	}

	#menu li a {
		padding:8px 5px;
	}

	.property_menu li {
    	
    	font-size: 18px; 
	}

	.langBar ul li {
    	
    	font-size: 16px;
    	padding: 0px 2px; 
	}


	.map {
		width:100%;
		height:800px;
		background-image:url("../images/map_1600x1080.png");
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center right;

	}

	.legend {
		display:none;
	}

	.legend_bottom {
		display:block;
		width:100%;
		height:300px;
		padding:0 5%;
		overflow:hidden;
		clear:both;
		color:#444;
	}

	.legend_bottom .legend_title {
		float:left;
		padding-right: 2%;
    	padding-left: 120px;
	}

	.legend_bottom .legend_title h2{
		font-size:2.2em;
		line-height:1.2em;
	}

	.legend_bottom .group{
		float:left;
		
	}

	.legend_bottom .group .title {
		width:220px;
		height: 45px;
	}

	.legend_bottom .group ul li {
		clear:both;
	}

	.legend_bottom .group ul li .icon_small{
		padding:5px 5px;
		float:left;
	}

	.legend_bottom .group ul li h5{
		padding-top:10px;
		margin: 0;
    	padding-bottom: 5px;
    	font-size: 1.1em;
	}

	.mcclogo {
    	width: 19%; 
	}

	.d_title {
    	font-size: 28px; 
    	margin:5px 0px;
	}

	.p_text {
    	font-size: 15px;
    	
    	width: 65%; 

	}


}


@media screen and (max-width: 1280px){ 
	.headerbg {
    
    	height: 180px; 
	}

	.container-fluid {
    	padding: 0 2%;
	}

	.navBar {
    	
    	padding-top: 90px; 
	}

	#menu li {
    	font-size: 22px; 
	}

	#menu li a {
		padding:5px;
	}

	.property_menu li {
    	
    	font-size: 18px; 
	}

	.langBar {
    	
    	padding-top: 90px; 
	}

	.langBar ul li {
    
    	font-size: 16px; 
    	padding: 0px 3px;
	}

	.videoDisclaimer p {
    	width: 96%; 
	}

	#viewer .viewerDisclaimer p {
    	width: 96%; 
	}

	.gallerydisclaimer {
    
    	padding: 0 2%; 
	}

	.legend_bottom .group .title {
		width:190px;
		
	}

	.mapdisclaimer {
  
    	padding: 0 2%; 
    	bottom:10px;
    }

    .mapdisclaimer p {
    	margin:0;
    }


	.bg_dis {
    
    	width: 96%; 
	}

	#disclaimer .contactInfo {
		top:180px;
	}

	.disclaimer_txt {
   
    	top: 180px; 
	}

}

@media screen and (max-width: 1024px){
	.legend_bottom {
		
		padding:0 4%;
		
	}

	.legend_bottom .legend_title {
		float:left;
		padding-right: 2%;
    	padding-left:0px;
	}
}



@media screen and (min-height: 1000px){
	.map{
		height:90vh;
	}
}


@media screen and (max-width: 736px) and (orientation: portrait) { 
	.top_wp {
		width:100%;
		margin:0 auto;
		padding-top:8%;
	}

	.top_wp .logo{
		width:300px;
		margin:0 auto;
	}

	.top_wp .logo img {
		width:70%;
		margin:0 auto;
		padding-top:5%;
	}

	.top_wp .lang {
		position:relative;
		z-index:10;
		top:-115px;
		right:5%;
		float:right;
	}

	.top_wp .lang ul li{
		display:inline;
		padding:5px 5px;
		font-size:12px;
	}

	.disclaimer {
		width:100%;
		padding-top:8%;
	}

	.disclaimer .popup_wp{
		width:90%;
		margin: 0 auto;
		
	}

	.disclaimer .popup_wp p{
		font-size:;
	}

	.disclaimer .soon{
		padding-bottom:50px;
	}

	.footer{
		width:100%;
		position:relative;
		bottom:0px;
		top:15px;

	}
	.footer .footer_wp{
		height:220px;
	}

	.footer .footer_wp .footer_left {
		float:left;
		padding-left:0px;
		width:100%;
	
	}
	.footer .footer_wp .footer_left p{
		width:97%;
		padding-left:5px;
		line-height:20px;
	}

	.footer .footer_right {
		width:100%;
		padding-right:0px;
		padding-top:20px;
		padding-bottom:20px;
	}

	.footer .footer_right img{
		width:200px;
		margin:0 auto;
	}

	.footer .copyright{
		width:90%;
		margin:0 auto;
		padding-top:0px;
		margin-bottom:50px;
		height:50px;
	}

	.footer .copyright .cp_txt{
		width:100%;
		float:left;
		padding-left:0px;
		text-align:center;
	}

	.footer .copyright .up_date{
		width:100%;
		float:right;
		text-align:center;
		padding-top:10px;
		padding-right:0px;
	}



}

@media screen and (max-width: 1024px) and (orientation: landscape) and (max-height:768px){ 
	.top_wp {
	width:100%;
	margin:0 auto;
	padding-top:2%;
	}

	.top_wp .logo img {
	width:50%;
	}

	.top_wp .lang {
	top:-55px;
	right:5%;
	
	}

	.top_wp .lang ul li{
	display:inline;
	padding:5px 5px;
	font-size:12px;
	}

	.disclaimer {
	width:100%;
	padding-top:4%;
	}
	.disclaimer .soon {
	
	padding-top:4%;
	height:150px;
	}

	.disclaimer .popup_wp{
		width:90%;

	}

	.footer{
		width:100%;
		position:relative;
		clear:both;
		top:20px;
	}

	.footer_wp{
		width:100%;
		margin:0 auto;
		clear:both;
		height:120px;
	}

	.footer .footer_wp .footer_left {
		float:left;
		padding-left:5%;
	
	}
	.footer .footer_wp .footer_left p{
			width:700px;
			
	}

	.footer .footer_right {
		float:right;
		padding-right:5%;
		padding-top:50px;
	}

	.footer .footer_right img{
		width:185px;
	}

	.footer .copyright{
		width:100%;
		margin:0 auto;
		padding-top:20px;
	}

	.footer .copyright .cp_txt{
	
		padding-left:5%;
	}

	.footer .copyright .up_date{
	
		padding-right:5%;
	}

}


@media screen and (min-width: 1245px) and (orientation: landscape) and (max-width:1380px){ 
		.top_wp {
			padding-top:3%;
		}

		.top_wp .logo img {
			width:60%;
			margin:0 auto;
		}

		.top_wp .lang {
			top:-68px;
		}

		.disclaimer {
			
			padding-top:3%;
		}

		.disclaimer .soon {
			padding-top:10%;
	
		}

		.footer .footer_wp .footer_left p{
			width:645px;
			line-height:20px;
		}

		



}

@media screen and (min-width: 1366px){
		.footer .footer_wp .footer_left p{
			width:785px;
			
	}

}

@media screen and (max-height:768px){
		.disclaimer .soon {
			padding-top:8%;
	
		}

} 


@media screen and (min-height: 840px) and (max-height:1000px){
		.disclaimer {
			
			padding-top:8%;
		}
} 

@media screen and (min-height: 1024px) and (max-height:1200px){ 

		.top_wp {
			padding-top:5%;
		}

		.disclaimer {
			
			padding-top:12%;
		}


}

@media screen and (min-width: 1440px)and (max-width:1599px){

		.top_wp .logo img {
			width:70%;
			margin:0 auto;
		}

		.top_wp .lang {
			top:-80px;
		}

		.disclaimer .soon {
			width:280px;
			font-size:20px;
			padding-top:8%;
	
		}

}

@media screen and (min-width: 1600px)and (max-width:1800px){
		.footer .footer_wp .footer_left p{
			width:950px;
			
		}
}

@media screen and (min-width: 1920px){

	.disclaimer .soon {
		width:290px;
		
		font-size:22px;
	}

	.footer .footer_wp .footer_left p{
			width:1150px;
			
		}

}

@media screen and (min-width: 1920px) and (min-height:1080px){ 


		.disclaimer {
			
			padding-top:9%;
		}

		.footer{
			bottom:30px;
		}

		.footer .footer_wp .footer_left p{
			width:1150px;
			
		}

}

@media screen and (min-width:600px) and (max-width:768px) and (orientation:portrait){
	.cover {
		width:100%;
		height:100%;
		position:absolute;
		z-index:1000;
		background-color:#6286C2;
		display:block;
	}

	.cover h4 {
		position: relative;
		top: 50%;
		left: 0px;
		text-align: center;
		font-size: 22px;
		line-height:28px;
	}

	.cover img {
		width:100px;
		margin:0 auto;
	}

	#wrapper {
		display:none;
	}

	.footer .footer_wp .footer_left p {
		display:none;
	}

}


@media screen and (max-height:480px) and (orientation:landscape){
	.cover_land {
		width:100%;
		height:100%;
		position:absolute;
		z-index:1000;
		background-color:#6286C2;
		display:block;
	}

	.cover_land h4 {
		position: relative;
		top: 60%;
		left: 0px;
		text-align: center;
		font-size: 14px;
		line-height:18px;
	}

	.cover_land img {
		width:100px;
		margin:0 auto;
	}

	#wrapper {
		display:none;
	}

	.footer .footer_wp .footer_left p {
		display:none;
	}

}