<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 {
		background: rgba(0,0,0,0.1);
		width: 8px;
	}
	::-webkit-scrollbar-track {
		margin-bottom: 16px; 
	}
	::-webkit-scrollbar-thumb {
		background: rgba(255,255,255,0.3);
		border-radius: 8px;
	}
	#pop_window ::-webkit-scrollbar {
		width: 8px;
	}
	#pop_window ::-webkit-scrollbar-track {
		margin: 8px 0;
	}
	/* scrollbar css end */

	/* 關閉視窗 css start */
	body {
		padding: 0!important;
		background-color: #3cc6ff;
	}
	.modal {
		position: relative;
		padding: 0!important;
		height: 100vh;
	}
	.modal-open {
		overflow: auto;
	}
	.modal-backdrop {
		z-index: 4;
	}
	.modal-dialog {
		width: 900px;
		margin: 40px auto;
	}
	/* 關閉視窗 css end */

	/* POP視窗 css start */
	#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-x: hidden;
		/*overflow: scroll;*/
		/*max-height: 120vh;*/
	}
	#pop_window .button_close {
		position: absolute;
		top: 14px;
		right: 14px;
		padding: 5px;
		cursor:pointer;
	}
	#pop_window .pop_container {
		padding: 30px;
	}
	#pop_window .pop_text {
		margin-bottom: 20px;
	}
	#pop_window .pop_text p {
		color: #ccc;
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 10px;
	}
	#pop_window h2 {
		color: #fff;
		padding: 0;
		margin-bottom: 10px;
		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 {
		padding: 0;
	}
	.map_style .container {
		position: relative;
	}
	.map_style .map_element {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.map_style .button_point {
		position: absolute;
		display: block;
		filter: drop-shadow(2px 4px 2px rgba(0,0,0,0.4));
		animation-duration: 1.5s; 
	}
	.map_style .button_point:hover  {
		-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 0 6px rgba(255,255,255,0.5));
		transition: 0.3s;
	}
	
	/* 地圖 css end */
	#factory_map .container {
		height: 100vh;
	}
	#factory_map .factory_squre {
		position: relative;
		padding-top: 5%;
	}
	#factory_map .bg_slogan_block {
		position: absolute;
		left: 0;
		width: 44%;
	}
	#factory_map .bg_slogan_block p {
		margin-top: 2%;
		font-size: 0.9em;
		color: #fff;
		line-height: 1.2em;
	}
	#factory_map .factory_arm {
		top: 20%;
		left: 63%;
	}
	#factory_map .factory_crobot {
		top: 35%;
		left: 23%;
	}
	#factory_map .factory_lift {
		top: 43%;
		left: 53%;
	}
	#factory_map .factory_mv {
		top: 24%;
		left: 30%;
	}
	#factory_map .factory_dc {
		top: 8%;
		left: 50%;
	}
	#factory_m_map {
		display: none;
	}
/*========================================*/
@media screen and (max-width:1900px) {
}
@media screen and (max-width:1900px) {
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1200px) {
	.map_style .button_point img {
		width: 80%;
	}
}
@media screen and (max-width: 1024px) {
	.modal-dialog {
		margin: 7% auto;
	}
	#factory_map .factory_squre {
		padding-top: 0;
		position: absolute;
	    top: 50%;
		-ms-transform: translate(0,-50%);
		transform: translate(0,-50%);
	}
}
@media screen and (max-width:991px)	{
	.modal-dialog {
		width: 100%;
	}
	#pop_window {
		width: 100%;
	}
	#pop_window .windows_container {
		width: auto;
	}
	#pop_window .pop_bg {
		margin: 0 3%;
	}
	.windows_container .bg_slogan {
		display: none;
	}
	#factory_map .bg_slogan_block p {
		font-size: 0.7em;
	}
	.map_style .button_point img {
		width: 70%;
	}
}
@media screen and (min-width:800px) and (max-width:820px) and (orientation:landscape) {
	#factory_map .factory_squre {
		padding-top: 5%;
		position: relative;
	    top: 0;
		-ms-transform: translate(0,0);
		transform: translate(0,0);
	}
	#factory_map .bg_slogan_block {
		top: 5%;
	}
}
@media screen and (max-width:768px)	{
	.vertical_center {
		display: block;
		width: 100%;
	}
	.modal-dialog {
		margin-top: 12%;
	}
	#pop_window .pop_container {
		padding: 20px;
	}
	#pop_window .block_right {
		padding-bottom: 60%;
	}
	#pop_window h2 {
		font-size: 22px;
	}
	#factory_map {
		display: none;
	}
	#factory_m_map {
		display: block;
		height: 100vh;
	}
	#factory_m_map .factory_item {
		padding: 0 10%;
	}
	#factory_m_map .bg_slogan {
		width: 100%;
		margin: 5% 0;
		padding: 0 5%;
	}
	#factory_m_map ul {
		padding: 0;
		margin: 0;
		padding: 0 5% 0;
		overflow: auto;
	}
	#factory_m_map li {
		width: 33.3%;
		float: left;
		padding: 0 1.5% 3%;
	}
	#factory_m_map .item_block {
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
		text-align: center;
		cursor: pointer;
	}
	#factory_m_map .item_block:hover {
		box-shadow: 0 0 10px rgba(0,0,0,0.5),0 0 30px rgba(86,119,175,0.8) inset;
		transition: 0.3s;
	}
	#factory_m_map .item_text {
		background-color: #5d6389;
		border-radius: 4px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		padding: 5px;
	}
	#factory_m_map li {
		width: 50%;
	}
}
@media screen and (max-width:650px)	{
	#factory_m_map .factory_item {
		padding: 0;
	}
}
@media screen and (max-width:500px)	{
	.button_back {
		top: 15px;
		right: 15px;
	}
	.button_back img {
		width: 70%;
		float: right;
	}
	#factory_m_map li {
		width: 100%;
		padding-bottom: 15px;
	}
	#factory_m_map .item_block {
		padding: 0;
	}
	#factory_m_map .item_block img {
		display: inline-block;
		width: 50%;
	}
	#factory_m_map .item_text {
		float: left;
		width: 50%;
		background-color: unset;
		text-align: left;
		font-size: 14px;
		color: #000;
		font-weight: bold;
		padding: 20px 0 0 20px;
	}
}

</style>