/******************************
EXAMPLE STYLES
******************************/
.noscroll {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 9999;
  visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  display: block;
}

.close {
  position: absolute;
  bottom: 0px;
  right: 50px;
  font-size: 36px;
  width:5em;
  height:3em;
  color:#fff;
  font-family: 'microsoft yahei';
  font-size:36px;
}
.mfg-cancel{
  margin-left: 26px;
}
.topWrap{

}
.topIcon{
  width:25%;
  height:100px;
  background-size:100%;
  margin:10% auto;
  margin-bottom:6%;
}
.topTitle{
  color:#fff;
  font-size: 90px;
  font-weight:bold;
  letter-spacing: 9px;
}
.topEn{
  font-size: 40px;
  color:rgba(255,255,255,.7);
  margin-top:5px;
  letter-spacing: 3px;
}
/* Main Nav */
.bottomWrap{
  width:90%;
/*   background:url('../images/rest/bottomBg.png') left bottom no-repeat; */
  background-size:100%;
  position:absolute;
  bottom:110px;
  left: 5%;
  background: #5fa0f0;
  border-radius: 25px;
  opacity: 0.6;
}
.nav {
  width: 96%;
  margin: 10px auto;
  font-size: 33px;
}

.nav-el {
  position: relative;
  display: inline-block;
  width: 23.071%;
  color: white;
  z-index: 10;
  margin:1% 0.9645%;
  float:left;
  height:100%;
  border-radius: 7px;
  -webkit-border-radius:7px;
/*   background:rgba(255,255,255,.8); */
  /* Placements */
}
.nav-el span{
  display:block;
}
.nav-el .icon_ {
  background-size:100%;
  margin:0 auto;
}

.nav-el .smallT{
  color:#52a0ea;
  font-size:36px;
  margin:5% auto;
}
.nav-el.active_reverse {
  z-index: 11;
}
section.active_reverse iframe{
  opacity:0;
  display:none;
  transition:all .5s;
  -webkit-transition:all .5s;
}
.nav-el.inactive {
  pointer-events: none;
  cursor: default;
}
.nav-el:nth-of-type(2n+1) {
  float: left;
}
iframe{
  width:100%;
  height:100%;
  border:0;
}
/* A fix for Safari and .nav-el z-index:
	when animation starts, the square appear bellow other .nav-el
  	even if it has a bigger z-index */
.demo3_cont {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
footer{
  display:flex;
  align-items:center;
  font-size: 36px;
  letter-spacing: 1px;
  color:#043881;
}
.bottomInfo{
  width:100%;
}
.bottomInfo img{
  vertical-align: middle;
}
/* Space adjustment  */
@media only screen and (min-width: 520px) {
  .nav {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) {

}
/******************************
COLORS
******************************/

body.dm-demo1 {
  background-size:100%;
  font-family:'microsoft Yahei';
  position:relative;
  overflow: hidden;
}
body.dm-demo1 .button {
  color: #1abc9c;
  background: #16a085;
}
body.dm-demo1 .button:hover {
  background-color: #fff;
}
body.dm-demo1 .overlay {
  background-color: #fff;
  overflow: hidden;
}
body.dm-demo1 .nav-el {
  transition: background-color .3s ease-in;
  -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
}
.elHide span{
  opacity:0;
}
body.dm-demo1 .nav-el:hover, body.dm-demo1 .nav-el.active {
  background: #fff;
}
body.dm-demo1 .nav-el.active {
  z-index: 11;
}
body.dm-demo1 .backtoarticle {
  border-color: #16a085;
  color: #16a085;
}
body.dm-demo1 .backtoarticle:hover {
  color: #fff;
  border-color: #fff;
}


@media(max-width:1920px ){
  div.hengpin{
    height:1920px;
    overflow: hidden;
  }
}
@media(max-width:1000px ){
  div.hengpin{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    overflow:hidden;
  }
}