body{
		margin:0;
		padding:0;
		width: 100%;
		height: 100%;
		background: #000;
	}
	.content{
		margin:0 auto;
		position:relative;
		height: 100%;
		width: 100%;
	}
	.media{
		margin: 0;
	}
	.mediaplay{
		width: auto;
		height: 100%;
		-webkit-animation: exshmove  2.5s ;
   		animation: exshmove  2.5s ;
   		margin-top: 0;
	}
	.mediacontainer{
		position: absolute; 
		z-index: -50; 
		width: 100%; 
		height: 100%; 
		overflow:hidden;
		display: inline-block;
	}
	#mediasource{
		margin: 0;
		padding: 0;
		width: 100%;
		height: auto;
		top: -10%;
	}
	#phonemedia{
		position: absolute; 
		z-index: -3; 
		width: 100%;
		height: 100%;
		background:#000 url("../img/mobilebg.jpg") no-repeat;
		background-size: cover;
		display: none;
		border-bottom: 1px solid #F15A22;
	}
	.prcover{
		width: 100%;
		height: 100%;
		text-align:center;
		background:url('../img/pattern.png') repeat;
	}
	#pr{
		font-family: 'Economica',Arial, '微軟正黑體', sans-serif;
		color: #F15A22;
		font-size: 1.4em;
		padding-top: 38%;
		font-weight: bold;
		width: 100%;
		height: auto;
		line-height: 2em;
		bottom: 0;
}
	#lg-all{
		display: flex;
		background: url('../img/menuline.png') no-repeat;
		background-size: cover;
		background-position: 50% 36%;
		width: 100%;
		height: 100%;
		padding: 0.7% 0;
		overflow: hidden;
	}
	#lg-all a{
		line-height: 1em;
	}
	#sm-all{
		display: none;
	}
	#pr img{
		width:100%;
	}
	#pr-mb,#pr-mo,#pr-iot,#pr-brix,#pr-nb,#pr-vga,#pr-pp{
		border-collapse: collapse;
		cursor: pointer;
		-webkit-transition: all .3s ease-in-out;
  		-moz-transition: all .3s ease-in-out;
  		-o-transition: all .3s ease-in-out;
  		transition: all .3s ease-in-out;
  		text-align:center;
  		-webkit-align-items: center;
        align-items: center;
  		-webkit-justify-content: center;
        justify-content: center;
        display: flex;
        height: 50px\9;
        padding-top: 0.5em\9;
        line-height: 1em\9;
	}
	#pr-mb:hover,#pr-pp:hover,#pr-mo:hover,#pr-iot:hover,#pr-brix:hover,#pr-nb:hover,#pr-vga:hover{
		box-shadow:inset 0px 0px 15px #F15A22;
		color: #F2CB05;
		text-shadow: 0px 0px 15px #F15A22;
	}
	#pr-vr{
		opacity:.8;
		display: inline-block;
		cursor: pointer;
	}
	#pr-vr img{
		width:80%;
		padding: 1%;
	}
#loadstatus{
	width: 100%;
	height: 100%;
	position: absolute; 
	z-index: -999;
}
.loadimg{	 
	text-align: center;
	padding-top: 20%;
	width: 100%;
	height: 100%;
}
.loadimg img{
	width: 45px;
	height: 45px;
  animation: loadpic linear .8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: loadpic linear .8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: loadpic linear .8s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: loadpic linear .8s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: loadpic linear .8s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}
@media (max-width:1700px) {
	#lg-all{
		padding-top: 1.5%;
		padding-top: 0.9%\9;
	}
	#lg-all a{
		font-size: 0.85em\9;
		font-size: 0.8em;
	}

}

@media (max-width:1200px) {
	#pr{
		font-size: 1.2em;
		line-height: 1em;
	}
	#lg-all{
		background-size:cover;
		padding-top: 1.5%;
	}
	#pr-vr{
		padding: .3% 0;
	}
	#pr-vr img{
		width: 100%;
	}
}
@media (max-width:992px) {
	.mediacontainer,#mediasource,#lg-all{
		display: none;
	}
	#phonemedia,#sm-all{
		display: inline-block;
	}
	#sm-all{
		font-size: 1.4em;
		margin-bottom: 3%;
		line-height: 3em;
	}
	.prcover{
		background: transparent;
	}
	#pr{
		padding-top: 5%;
		background: rgba(0,0,0,.5);
	}
	#loadstatus{
		display: none;
	}
	.mediaplay{
		animation:none;
	}
	#pr-mb,#pr-mo,#pr-iot,#pr-brix,#pr-nb,#pr-vga,#pr-pp{
		padding: 0;
		line-height: 60px;
	}
	
}

/*animation*/
@-webkit-keyframes exshmove {
    0%   {opacity: 0;}
    90%	 {opacity: 0}
    100% {opacity: 1;}
}
@keyframes exshmove {
    0%   {opacity: 0;}
    90%	 {opacity: 0}
    100% {opacity: 1;}
}

@keyframes loadpic{
  0% {
    transform:  rotate(0deg) ;
  }
  100% {
    transform:  rotate(360deg) ;
  }
}

@-moz-keyframes loadpic{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  100% {
    -moz-transform:  rotate(360deg) ;
  }
}

@-webkit-keyframes loadpic {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  rotate(360deg) ;
  }
}

@-o-keyframes loadpic {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  100% {
    -o-transform:  rotate(360deg) ;
  }
}

@-ms-keyframes loadpic {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  100% {
    -ms-transform:  rotate(360deg) ;
  }