@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'box-text';
  src: url("../fonts/Inder.woff");
  font-display: swap;
}

body, html {
  height: 100%;
  position:relative;
	margin:0px; padding: 0px;
  font-family: "Gill Sans", "Gill Sans MT", "Helvetica", "Arial", "sans-serif";
}
* {
  box-sizing:border-box;
}


/* STRUCTURE --START-- */
.header {
	display:flex;
	height:3em; width:100%;
	margin: 0px auto!important;
	position: fixed; top:0;
  /*background-color: palegreen;*/
	overflow: hidden;
	z-index:10;
 }
 
.parent-frame {
	position: relative;
	/*background-color: palegoldenrod;*/
	margin: 0px; padding:0px;
	width:85vw!important; height:80vh!important;
  top: 49%!important; left: 50%!important;
  transform: translate(-50%, -50%)!important;
}
.responsive-iframe {
	position: absolute!important;
  top:0!important; bottom:0!important;
  left: 0!important; right:0!important;
  width: 100%!important; height: 100%!important;
	border: none!important; overflow: hidden!important;
}

.footer-div {
  justify-content:center; align-items:center;
	display:inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	position: fixed; bottom:0!important;
  width: 100%;
	height:auto;
  /*background-color: palevioletred;*/
	margin:0px auto!important; padding:4px 0px 0px;
	z-index:11;
}
/* STRUCTURE --END-- */ 
 
 
/* PILL NAVIGATION MENU --START-- */
.pill-nav-header {
  display: flex; flex-wrap: nowrap; flex-direction:row;
  position:relative;
	margin: 0px auto;
  justify-content: center; align-items:center;
}
.pill-nav-header a {
  display:inline-block;
	width: 120px;
  padding: 6px 20px; margin:0px 10px;
  text-decoration: none;
  font-size: 13pt; font-weight: bold; color: black; text-align: center;
  border-radius: 12px; border:solid thin black;
}
.pill-nav-header-lng:hover {
  background-color: black; color: white;
  border:solid thin white;
}
.active-nav-header-lng {
  background-color: black; color: white!important;
  border:solid thin white;
}
/* PILL NAVIGATION MENU --END-- */ 


/* FOOTER --START-- */
ul.footer-line1 {
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content: center;
  list-style-type: none;
  padding:0px 2px; margin:0px auto;
}
ul.footer-line2 {
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content: center;
  list-style-type: none;
  padding:0px 2px; margin:3px auto 0px;
}
ul.footer-line1 li {
  margin:0px 17px;
}
ul.footer-line2 li {
  margin:0px 4px;
}
.footer-div li a {
  text-decoration: none;
  color:black;
}
.footer-div li img.contact_img {
  width:135%;
}
.footer-line1 .contact_img:hover {
  transform:scale(1.20);
  transition: ease-in 0.2s;
  -webkit-transform:scale(1.20);
  -moz-transform:scale(1.20);
  -ms-transform:scale(1.20);
  cursor:pointer;
}
.footer-div li a#beian:hover {
  text-decoration: none;
  background:#DDDDDD;
}
.footer-div li a#icp:hover {
  text-decoration: none;
  background:#DDDDDD;
}
.footer-text2 {
  font-size: 9pt;
  line-height: 1.2;
  text-align: left; vertical-align: middle;
  margin-left:auto; margin-right: auto;
	font-family: 'box-text';
}
#icp-n {
  border-left: solid thin black;
  padding-left:7px;
}
#beian-n {
  border-right: solid thin black;
  padding-right:7px;
}
#police_logo {
  display:inline-block;
  width: 8%;
  margin:0px 0px 3px 2px;
  vertical-align: middle;
}
/* FOOTER --END-- */

/* OVERLAY QR --START-- */
.overlay {
  height: 0%; width: 100%;
  position: fixed;
  z-index: 100;
  top: 0; left: 0;
  background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  text-align: center;
  margin-top: 25px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 30px;
  color: white;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 20px; right: 45px;
  font-size: 80px;
  padding: 5px;
}
#qr_wechat {
  width:50%;
  padding:3px;
}
#qr_qq {
  width:25%;
  padding:0px;
}
/* OVERLAY QR --END-- */


@media screen and (max-width : 850px ){

/* OVERLAY QR --START-- */
#qr_wechat {
  width:75%;
  padding:3px;
}
#qr_qq {
  width:40%;
  padding:5px;
}
/* OVERLAY QR --END-- */

/* FOOTER --START-- */
.footer-div {
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin:0px auto!important; padding:0px!important;
	z-index:11;
}
ul.footer-line1 {
  display:flex; flex-direction:row; flex-wrap:wrap;
  padding:2px; margin:0px;
}
ul.footer-line2 {
  display:flex; flex-direction:row; flex-wrap:wrap;
  padding:2px; margin:2px 0px 0px;
}
ul.footer-line1 li {
  margin:0px 18px;
}
ul.footer-line2 li {
  margin:0px 4px;
}
.footer-div li img.contact_img {
  width:130%;
}

.footer-text2 {
  font-size: 0.70em;
  line-height: 1.3em;
  text-align: center;
  vertical-align: middle;
}
/* FOOTER --END-- */

}

@media screen and (max-width : 550px ){

/* PILL NAVIGATION MENU --START-- */
.pill-nav-header {
  display: flex; flex-wrap: wrap; flex-direction:row;
  position:relative;
  margin-top:5px; margin-bottom:0px;
}
.pill-nav-header a {
  display:inline-block;
  font-size: 12pt;
  font-weight: bold;
  border-radius: 10px;
  border:solid thin black;
	width: 110px;
}
/* PILL NAVIGATION MENU --END-- */ 

/* OVERLAY QR --START-- */
#qr_wechat {
  width:85%;
  padding:3px;
}
#qr_qq {
  width:50%;
  padding:3px;
}
/* OVERLAY QR --END-- */

/* FOOTER --START-- */
.footer-div {
	display:inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin:0px auto!important; padding:0px!important;
	z-index:11;
}
ul.footer-line1 {
  display:flex; flex-direction:row; flex-wrap:wrap;
  padding:2px; margin: 0px 3px;
}
ul.footer-line2 {
  display:inline-flex; flex-direction:row; flex-wrap:wrap;
  align-items:center;
  justify-content: center;
  list-style-type: none;
  padding:1px; margin: 0px;
}
ul.footer-line1 li {
  margin:0px 15px;
}
ul.footer-line2 li {
  margin:0px 4px;
}
.footer-div li img.contact_img {
  width:125%;
}
.footer-text2 {
  font-size: 8pt;
  line-height: 1;
  text-align: left; vertical-align: middle;
  margin-left:auto; margin-right: auto;
}
/* FOOTER --END-- */

}

@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}

.overlay .closebtn {
  font-size: 30px;
  top: 15px;
  right: 35px;
}


}