<style>
	/* 預設 css start */
	.product-wrap section {
		padding:5% 0;
	}
	.product-wrap li {
		list-style: none;
	}
	.product-wrap p {
		font-size: 20px;
		margin-bottom: 0;
		font-weight: lighter;
	}
	.vertical_center {
		display: table-cell;
		vertical-align: middle;
		min-height: 1px;
		width: 50%;
	}
	/* 預設 css end */

	/* scrollbar css start */
	::-webkit-scrollbar {
		width: 16px;
		height: 16px;
		background: #001a34;
	}
	::-webkit-scrollbar-track {
		margin-bottom: 16px; 
	}
	::-webkit-scrollbar-thumb {
		background: #7ba4e5;
	}
	#pop_window ::-webkit-scrollbar {
		width: 8px;
	}
	#pop_window ::-webkit-scrollbar-track {
		margin: 8px 0;
	}
	/* scrollbar css end */

	/* 關閉視窗 css start */
	body {
		padding: 0!important;
	}
	.modal {
		position: relative;
		padding: 0!important;
		height: 148vh;
	}
	.modal-open {
		overflow: auto;
	}
	.modal-backdrop {
		z-index: 4;
	}
	.modal-dialog {
		width: 900px;
		margin: 160px auto 0;
	}
	/* 關閉視窗 css end */

	/* POP視窗 css start */
	.bg_slogan {
		position: absolute;
		top: 0;
		left: 0;
		filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
		width: 100%;
		margin-top: 50px;
		padding: 0 10%;
	}
	#pop_window {
		position: absolute;
		z-index: 5;
		left: 50%;
		-ms-transform: translate(-50%,0);
		transform: translate(-50%,-0);
		width: 100%;
	}
	#pop_window .windows_container {
		width: 100%;
	}
	#pop_window .pop_bg {
		position: relative;
		background-color: rgba(23,26,54,0.8);
		border: 2px solid #7ba4e5;
		overflow: scroll;
		overflow-x: hidden;
		max-height: 120vh;
	}
	#pop_window .button_close {
		position: absolute;
		top: 14px;
		right: 14px;
		cursor:pointer;
	}
	#pop_window .pop_container {
		padding: 40px;
	}
	#pop_window .pop_text {
		margin-bottom: 30px;
	}
	#pop_window .pop_text p {
		color: #ccc;
		font-size: 16px;
		margin-bottom: 10px;
	}
	#pop_window h2 {
		color: #fff;
		padding: 0;
		margin-bottom: 20px;
		font-size: 30px;
		text-align: center;
	}
	#pop_window h3 {
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		padding: 12px;
		background-color: rgba(0,102,204,0.7);
		margin: 0 0 2px; 
	}
	#pop_window h4 {
		font-size: 20px;
		font-weight: bold;
		color: #ffdb5c;
		margin-top: 0;
	}
	#pop_window .product_block {
		margin-bottom: 10px;
	}
	#pop_window .pop_product {
		display: table;
		width: 100%;
	}
	#pop_window .block_left {
		background-color: #0066cc;
		padding: 20px;
	}
	#pop_window .product_desc {
		padding-right: 10px;
	}
	#pop_window .product_img {
		padding-right: 10px;
		text-align: center;
	}
	#pop_window ul {
		padding-left: 30px;
	}
	#pop_window ul p {
		color:#fff;
		font-size: 16px;
		margin-bottom: 6px;
		font-weight: 600;
		margin-left: -20px;
	}
	#pop_window ul li {
		color:#fff;
		list-style: disc;
		font-size: 14px;
	}
	#pop_window .block_right {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	#pop_window .button_seemore {
		text-align: center;
		margin-top: 20px;
	}
	#pop_window .button_seemore a {
		display: inline-block;
	}
	#pop_window #transportations {
		display: none;
	}
	#pop_window #parkinglot {
		display: none;
	}
	#pop_window #surveillance {
		display: none;
	}
	#pop_window #wifi {
		display: none;
	}
	#pop_window #streetlight {
		display: none;
	}
	#pop_window #building {
		display: none;
	}
	#pop_window #Medical {
		display: none;
	}
	/* POP視窗 css end */

	/* 地圖 css start */
	.map_style {
		position: relative;
		padding: 0;
		overflow: auto;
		overflow-x: hidden;
	}
	.map_style img {
		max-width: none;
	}
	.map_style .map_element {
		position: absolute;
	}
	.map_style .map_element .element_img:hover {
		filter: brightness(70%);
		transition: 0.5s;
	}
	.map_style .button_point {
		position: absolute;
		filter: drop-shadow(0 4px 6px rgba(0,0,0,8));
		z-index: 2;
	}
	.map_style .button_point img {
		animation-duration: 1.5s; 
	}
	.map_style .map_element:hover .button_point {
		-webkit-animation-name: pointjump;
		animation-name: pointjump;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
	}
	@keyframes pointjump {
		16.65% {-webkit-transform: translateY(8px);transform: translateY(8px);}
		33.3% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
		49.95% {-webkit-transform: translateY(4px);transform: translateY(4px);}
		66.6% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
		83.25% {-webkit-transform: translateY(1px);transform: translateY(1px);}
		100% {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	.button_back {
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 4;
	}
	.button_back:hover {
		filter: drop-shadow(0 6px 6px rgba(0,0,0,0.5));
		transition: 0.2s;
	}
	#city_map .city_hospital {
		top: 174px;
		left: 786px;
	}
	#city_map .city_hospital .button_point {
		top: 50px;
		left: 148px;
	}
	#city_map .city_parking {
		top: 346px;
		left: 1118px;
	}
	#city_map .city_parking .button_point {
		top: 260px;
		left: 110px;
	}
	#city_map .city_camera {
		top: 750px;
		left: 294px;
		z-index: 1;
	}
	#city_map .city_camera .button_point {
		top: 0px;
		left: 60px;
	}
	#city_map .city_building {
		top: 280px;
		left: 156px;
	}
	#city_map .city_building .button_point {
		top: 40px;
		left: 90px;
	}
	#city_map .city_wifi {
		top: 610px;
		left: 820px;
	}
	#city_map .city_wifi .button_point {
		top: 120px;
		left: -6px;
	}
	#city_map .city_tbar {
		top: 750px;
		left: 540px;
	}
	#city_map .city_tbar .button_point {
		top: 10px;
		left: 100px;
	}
	#city_map .city_media {
		top: 980px;
		left: 220px;
	}
	#city_map .city_media .element_img {
		filter: drop-shadow(-3px 0px 5px rgba(0,0,0,0.3));
	}
	#city_map .city_media .button_point {
		top: -20px;
		left: 30px;
	}
	#city_map .city_moto {
		top: 1050px;
		left: 1010px;
	}
	#city_map .city_moto .button_point {
		top: -60px;
		left: -36px;
	}
	#city_map .city_roadlight {
		top: 220px;
		left: 1360px;
	}
	#city_map .city_roadlight .button_point {
		top: -70px;
		left: -50px;
	}
	/* 地圖 css end */

	#factory_map .factory_arm {
		top: 380px;
		left: 1360px;
	}
	#factory_map .factory_arm .button_point {
		top: -50px;
		left: 60px;
	}
	#factory_map .factory_crobot {
		top: 780px;
		left: 1120px;
	}
	#factory_map .factory_crobot .button_point {
		top: -80px;
		left: -44px;
	}
	#factory_map .factory_lift {
		top: 990px;
		left: 1370px;
	}
	#factory_map .factory_lift .button_point {
		top: 0px;
		left: 70px;
	}
	#factory_map .factory_mv {
		top: 430px;
		left: 960px;
	}
	#factory_map .factory_mv .button_point {
		top: -50px;
		left: -20px;
	}
	#factory_map .factory_dc {
		top: 430px;
		left: 510px;
	}
	#factory_map .factory_dc .button_point {
		top: 0px;
		left: 90px;
	}
	#factory_map .factory_lk {
		top: 660px;
		left: 410px;
	}
	#factory_map .factory_lk .button_point {
		top: 20px;
		left: 90px;
	}
/*========================================*/
@media screen and (max-width:1900px) {
	.map_style {
		overflow-x: scroll;
	}
}
@media screen and (max-width:1440px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width:991px)	{
	.modal-dialog {
		width: 100%;
	}
	#pop_window {
		width: 100%;
	}
	#pop_window .windows_container {
		width: auto;
		margin: 0 3%;
	}
	#pop_window .pop_bg {
		margin: 0 2%;
	}
}
@media screen and (max-width:768px)	{
	.vertical_center {
		display: block;
		width: 100%;
	}
	.modal-dialog {
		margin-top: 140px;
	}
	#pop_window .pop_container {
		padding: 20px;
	}
	#pop_window .block_right {
		padding-bottom: 60%;
	}
}
@media screen and (max-width:500px)	{
	.button_back {
		top: 10px;
		right: 10px;
	}
	.button_back img {
		width: 70%;
		float: right;
	}
}

</style>