@charset "utf-8";
body {overflow:hidden;}
body,html{height: 100%;background: #0cb5b5;}
body,ul{margin:0;padding:0}
body{font:14px "Microsoft JhengHei";-webkit-text-size-adjust:100%;}
li{list-style:none}
a{text-decoration:none;}

/*
::-webkit-scrollbar-track{ background-color: #0cb5b5; }
::-webkit-scrollbar{ width: 2px; height:8px; background-color: #0cb5b5; }
::-webkit-scrollbar-thumb{ background-color: #5d9cbc; }
*/
/*Logo*/
	#_logo .logo {
		position: fixed;
		z-index:9999;
		top:-20px; left:-25px;
		filter:drop-shadow(0px 0px 5px rgba(0,0,0,.8));
		padding-right:3%;
		}
	 
	#_logo .logo span{
    	transform: translate(50%,-50%);
    	text-transform: uppercase;
		display:inline;
    	font-family: verdana;
    	font-size: 3em;
		line-height:1.8em;
    	font-weight: 700;
    	color: #f5f5f5;
    	text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
		1px 12px 6px rgba(16,16,16,0.4),
		1px 20px 10px rgba(16,16,16,0.2),
		1px 22px 35px rgba(16,16,16,0.2),
		1px 25px 60px rgba(16,16,16,0.4);
		margin:-50px 15px 5px 10px;
		}
	#_logo .logo strong{
		font-family:'Microsoft YaHei', sans-serif; font-size:2em; margin-right:30px;
		color:#f5f5f5; text-shadow:rgba(0,0,0,.5) 0.1em 0.1em 0.2em; line-height:2.6em; vertical-align:top;
		padding:0 .5em 0 .1em; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
		background-clip:padding-box,border-box;
		background-origin:padding-box,border-box;
		background-image:linear-gradient(135deg,transparent,transparent),linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0));
		background-repeat:no-repeat;
		background-position:left 40px;
		border-bottom:.3em transparent solid;
		}
	#_logo .logo img{ max-height:100px; vertical-align:middle; margin-top:5px; margin-left:0px; margin-right:0px;}
	#_logo .logo:before {
		content:"";
		background: -webkit-linear-gradient(#1583a1,#3fbbca);
		background: -o-linear-gradient(#1583a1,#3fbbca);
		background: -moz-linear-gradient(#1583a1,#3fbbca);
		background: linear-gradient(#1583a1,#3fbbca);
		-webkit-border-bottom-right-radius: 20px;
		-moz-border-radius-bottomright: 20px;
		border-bottom-right-radius: 20px;
		border:#a1cdd7 3px solid;
		border-right:none;
		position:absolute;
		top:-15px; left:-30%;
		z-index:-1;
		width:85%;
		height:130px;
		transform-origin:bottom;
		transform:skewX(-50deg);
		}
	#_logo .logo span:after{
		content:"";
		background: -webkit-linear-gradient(#1583a1,#35aec0);
		background: -o-linear-gradient(#1583a1,#35aec0);
		background: -moz-linear-gradient(#1583a1,#35aec0);
		background: linear-gradient(#1583a1,#35aec0);
		-webkit-border-bottom-right-radius: 20px;
		-moz-border-radius-bottomright: 20px;
		border-bottom-right-radius: 20px;
		border:#a1cdd7 3px solid;
		border-right:none;
		position:absolute;
		top:0; left:0;
		z-index:-2;
		width:88%;
		height:95px;
		transform-origin:bottom;
		transform:skewX(-45deg);
		}


/* nav */
.ahow_nav{
	width: 0px;
	height: 100%;
	background: #0cb5b5;
	/*transition: all .3s;*/
	position: absolute;
	top:0;
	left: 0;
}
.ahow_nav a{display: block;overflow: hidden;padding:15px 0 15px 20px;line-height: 20px;height:auto;color: #FFF;transition: all .3s;/* border-left:#0cb5b5 3px solid; */}
.ahow_nav a span{margin-left: 10px; width: 55%; display: inline-block; vertical-align:top; margin-top:-2px;}
.nav-item{position: relative;}
.nav-item.nav-show{border-bottom: none;}
.nav-item ul{display: none;background: rgba(0,0,0,.1);}
.nav-item.nav-show ul{display: block;}
.nav-item i{ font-size:18px;}
.nav .nav-icon{font-size: 20px;position: absolute;margin-left:-1px;}
/*---------------------*/
.nav-more{float:right; margin-right: 20px; font-size: 12px;transition: transform .3s;}
.nav-more::after{content: "\f078"; font-size:8px; color:rgba(255,255,255,.5);}
/*---------------------*/
.nav-show .nav-more{transform:rotate(90deg);}
.nav-show{color: #FFF;background:#1f91ab;}
.nav-item>a:hover{color: #FFF;background:rgba(0,0,0,.1); border-left:#00ffff 3px solid;}
.nav-show>a:before,.nav-item>a:hover:before{opacity:1;}
.nav-item li { border-bottom:rgba(255,255,255,.1) 1px solid; }
.nav-item li span{ width: 80%; }
.nav-item li:first-child {
	-moz-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
	box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
	}
.nav-item li:hover a{color: #FFF;background: rgba(0, 0, 0,.1);}
/*.navdiv {overflow:auto; overflow-x:hidden;}*/

/* nav-mini */
#mini { border-bottom:1px solid rgba(118,187,253,1); cursor:pointer;}
.nav-mini.nav{width: 0px;}
.nav-mini.nav .nav-item>a span{display: none;}
.nav-mini.nav .nav-more{margin-right: -20px;}
.nav-mini.nav .nav-item ul{position: absolute;top:0px;left:60px;width: 180px; z-index: 99999;background:#1c829a;overflow: hidden;}
.nav-mini.nav .nav-item li:first-child { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;	}
.nav-mini.nav .nav-item li{ border-bottom:#2c5276 1px solid; }
.nav-mini.nav .nav-item:hover{background:rgba(255,255,255,.1);}
.nav-mini.nav .nav-item:hover .nav-item a{color:#FFF;}
.nav-mini.nav .nav-item:hover a:before{opacity:1;}
.nav-mini.nav .nav-item:hover ul{display: block;}

/* searchdiv */
#searchdiv {position:absolute; top:3%; right:3%;}
#searchdiv input {
	background:#0cb5b5;
	padding:8px 15px;
	font-family: "Microsoft JhengHei";
	color:#dddddd;
	font-size:16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:none;
	}
#searchdiv i{
	background:#0cb5b5;
	padding:3px;
	color:#dddddd;
	font-size:30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	vertical-align:top;
	}
#searchdiv i:hover{background:#2193ad;}

/*zoomdiv*/
#zoomdiv {
	position:absolute;
	/*bottom:13%;*/
	bottom:170px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	/*right:3%;*/
	right:10px;
	padding: 0px 0px;
	text-align:center;
	z-index:20;
	width:50px;
	height:50px;
	}
#zoomdiv.expanded {
	/*bottom: calc(17%);*/
	bottom: 315px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}
#zoomdiv a{
	width:50px;
	height:50px;
	display: block;
	margin-top: 10px;
	background:#0cb5b5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-decoration:none;
}

#zoomdiv a:hover, #zoomdiv a:hover{
	text-decoration:none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:#2193ad;
}
#zoomdiv i{
	/* background:#0cb5b5; */
	width:40px;
	height:40px;
	padding:10px;
	color:#ffffff;
	font-size:30px;
	vertical-align:top;
	border-bottom:#76bbfd 1px solid;
	}
#zoomdiv i:hover{/* background:#2193ad; */}

/* datediv */
#datediv{position:fixed; bottom: 0px; left:12.2%; background:#0cb5b5; z-index:99;}
#datediv ul{white-space: nowrap;}
#datediv ul li{ list-style:none; background:#3a7593; color:#FFFFFF; padding:15px 30px 10px 10px;display:inline-block; margin-left:-4px;}
#datediv ul li:nth-child(2n){ background:#5d9cbc; }
#datediv span{display: block;}
#datediv .area{ font-size:18px;}
#datediv .num{ font-size:24px; font-weight:bold;}
#datediv ul li:hover{ background:#71adcc;}
#datediv img{ float:left; margin-right:15px;}

/*scale*/
.scalediv{ width:200px; height:30px; background:url(../images/scale.png) no-repeat top center; position:absolute; right:3%; bottom:3%;}

/*itemdiv*/
#itemdiv {
	position:fixed;
	left:0px;
	opacity:0;
	bottom:-150px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	z-index:19;
	width:100%;
	}
#itemdiv .demo{
  width:100%;
  height:150px;
  background-color:#0cb5b5;
  position:relative;
  padding:10px 0;
}
/*#itemdiv.expanded { bottom: calc(0px); opacity:1; transition: 0.5s; -webkit-transition: 0.5s; }*/
#itemdiv.expanded { bottom: 30px; opacity:1; transition: 0.5s; -webkit-transition: 0.5s; }
#itemdiv .demo:before, #itemdiv .demo:after{
  width:0px;
  height:0px;
  border:transparent solid;
  position:absolute;
  right:68px;
  content:""
}
#itemdiv .demo:after{
  border-width:15px;
  border-bottom-color: #0cb5b5;
  top:-26px;
}
#itemdiv .imgdiv{overflow: auto; overflow-y:hidden; white-space: nowrap; }
#itemdiv .imgdiv li{ list-style:none; display: inline-block; }
#itemdiv .imgdiv li div{
	width:180px;

	background:#DFDFDF;
	margin:5px 5px 10px 5px;
	box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 10px 5px -5px  rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 10px 5px -5px  rgba(0, 0, 0, 0.3);
	-o-box-shadow: 0px 10px 5px -5px  rgba(0, 0, 0, 0.3);
	}



.baselayetText {
    position: relative;

    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 10px black;
    width: 100%;
    height: 20%;
    margin-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.73);
}














/* xs - Extra small devices (portrait phones, less than 576px) */
		@media (max-width: 575.98px) {
			.logo_img{
				width: 380px;
			}

		}

		/* sm - Small devices (landscape phones, 576px and up) */
		@media (min-width: 576px) and (max-width: 767.98px) {
			.logo_img{
				width: 480px;
			}

		}

		/* md - Medium devices (tablets, 768px and up) */
		@media (min-width: 768px) and (max-width: 991.98px) {
			.logo_img{
				width: 580px;
			}

		}

		/* lg - Large devices (desktops, 992px and up) */
		@media (min-width: 992px) and (max-width: 1199.98px) {

			.logo_img{
				width: 580px;
			}
		}

		/* xl - Extra large devices (large desktops, 1200px and up) */
		@media (min-width: 1200px) {

			.logo_img{
				width: 680px;
			}
		}


.ahow_nav_toolbar {
    position: absolute;
    top: 165px;
    transition: all .3s;
    left: 0px;
    height: 350px;
    overflow-y: auto;
	overflow-x: hidden;
	z-index: 999;
}
.ahow_nav_toolbar_mini{
	left: -300px !important;
}
.ahow_nav_toolbar a{display: block;overflow: hidden;padding:15px 0 15px 20px;line-height: 20px; height:auto; color: #FFF;transition: all .3s; border-left:#0cb5b5 3px solid;}
.ahow_nav_toolbar a span{margin-left: 10px; width: 150px; display: inline-block; vertical-align:top; margin-top:-2px;}

.ahow_nav_toolbar a:focus,.ahow_nav_toolbar  a:hover{
	color:#ffffff;
}


/* xs - Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.ahow_networkdiv{
		top: 70px !important;
	}
	.ahow_nav_btn{
		top: 70px !important;
	}
	.ahow_nav_toolbar{
		top: 130px !important;
	}

}

/* sm - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.ahow_networkdiv{
		top: 110px !important;
	}
	.ahow_nav_btn{
		top: 110px !important;
	}
	.ahow_nav_toolbar{
		top: 165px !important;
	}

}

/* md - Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.ahow_networkdiv{
		top: 110px !important;
	}
	.ahow_nav_btn{
		top: 110px !important;
	}
	.ahow_nav_toolbar{
		top: 165px !important;
	}

}

/* lg - Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ahow_networkdiv{
		top: 110px !important;
	}
	.ahow_nav_btn{
		top: 110px !important;
	}
	.ahow_nav_toolbar{
		top: 165px !important;
	}
}

/* xl - Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.ahow_networkdiv{
		top: 110px !important;
	}

	.ahow_nav_btn{
		top: 110px !important;
	}
	.ahow_nav_toolbar{
		top: 165px !important;
	}
}
.ahow_nav_btn{

	background:#0cb5b5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align:center;
	z-index:20;

    position: absolute;
    top: 110px;
    /* left: -300px !important; */
    left: 5px;
    height: 50px;
    width: 50px;
    overflow: hidden;
}

.ahow_nav_btn a{
    width: 50px;
    height: 50px;
    display: block;
}
.ahow_nav_btn i{
	height:40px;
	width:40px;
	padding:8px;
	color:#ffffff;
	font-size:30px;
	vertical-align:top;
	}
.ahow_nav_btn a:hover{background:#2193ad;}






/* xs - Extra small devices (portrait phones, less than 576px) */
		@media (max-width: 575.98px) {
			#_logo .logo img{
				width: 60px;
			}
			#_logo .logo:before{width: 490px;height: 73px;}
			#_logo .logo strong{
				font-size: 15px;
			}
		}

		/* sm - Small devices (landscape phones, 576px and up) */
		@media (min-width: 576px) and (max-width: 767.98px) {
			#_logo .logo img{
				width: 60px;
			}
			#_logo .logo:before{width: 580px;height: 73px;}
			#_logo .logo strong{
				font-size:18px;
			}
		}

		/* md - Medium devices (tablets, 768px and up) */
		@media (min-width: 768px) and (max-width: 991.98px) {
			#_logo .logo img{
				width: 90px;
			}
			#_logo .logo:before{width: 650px;height: 97px;}
			#_logo .logo strong{
				font-size: 20px;
			}
		}

		/* lg - Large devices (desktops, 992px and up) */
		@media (min-width: 992px) and (max-width: 1199.98px) {

			#_logo .logo img{
				width: 90px;
			}
			#_logo .logo:before{width: 650px;height: 97px;}
			#_logo .logo strong{
				font-size: 20px;
			}
		}

		/* xl - Extra large devices (large desktops, 1200px and up) */
		@media (min-width: 1200px) {

			#_logo .logo img{
				width: 90px;
			}
			#_logo .logo:before{width: 715px;height: 97px;}
			#_logo .logo strong{
				font-size: 22px;
			}
		}


a:focus, a:hover
{
	text-decoration:none;
}

img:target {
  border: 3px solid blue;
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: fixed;
        margin: auto;
        width: 35%;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
             -o-transform: translate3d(0%, 0, 0);
                transform: translate3d(0%, 0, 0);
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.left .modal-body,
    .modal.right .modal-body {
        padding: 15px 15px 80px;
    }

/*Left*/
    .modal.left.fade .modal-dialog{
        left: -600px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
           -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
             -o-transition: opacity 0.3s linear, left 0.3s ease-out;
                transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.in .modal-dialog{
        left: 0;
    }

/*Right*/
    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
           -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
             -o-transition: opacity 0.3s linear, right 0.3s ease-out;
                transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }


.defaultbaseimg  {
  border: 3px solid blue;
}




/* xs - Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.modal-dialog{
		width: auto !important;
		margin: 10px !important;
	}
}

/* sm - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.modal-dialog{
		width: auto !important;
		margin: 10px !important;
	}
}

/* md - Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.modal-dialog{
		width: 60% !important;
	}
}

/* lg - Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.modal-dialog{
		width: 45% !important;
	}
}

/* xl - Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.modal-dialog{
		/*width: 100% !important;*/
	}
}


.ahow_networkdiv {
	position:absolute;
	top:150px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	right:3%;
	padding: 0px 0px;
	text-align:center;
	z-index:20;
	width:50px;
	height:50px;
}

.ahow_networkdiv a{
	width:50px;
	height:50px;
	display: block;
	background:#0cb5b5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.ahow_networkdiv a:hover, .ahow_networkdiv a:hover{

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:#2193ad;
}

.btn_23d:hover{
	color:white;
}
.btn_23d {
	width:100%; padding:10px 0 20px 0;
	border-bottom:rgba(255,255,255,.5) 1px solid;
	cursor:pointer; transition: filter 0.2s ease-in-out;
	color: rgba(255,255,255,.8);
}
.btn_23d:before {
	content: "3D";
	color:white;
	transform: translate(50%,-50%);
	text-transform: uppercase;
	font-family: verdana;
	font-size: 2em;
	line-height:1em;
	font-weight: 700;
	text-shadow: 1px 1px 1px #0d7e7e,
    1px 2px 1px #0d7e7e,
    1px 3px 1px #0d7e7e,
    1px 4px 1px #0d7e7e,
    1px 5px 1px #0d7e7e,
	1px 8px 6px rgba(16,16,16,0.2),
	1px 22px 10px rgba(16,16,16,0.1),
	1px 25px 35px rgba(16,16,16,0.1),
	1px 30px 60px rgba(16,16,16,0.2);
	margin-right:4px;
}

.btn_23d_3d:before {
	content: "2D" !important;
}


#locTab.nav>li>a{padding: 10px 10px;}