/*
	body
	----------------------------------------------------------------------
*/
body {
	margin:0;
	left:0px;
	top:0px;
	height:auto;
	font-family:Arial;
	height:100%;
	min-height: 100%;
}

html {	
	height:100%;
	min-height: 100%;
}

/*
	framework
	----------------------------------------------------------------------
*/
div[visible="false"] {
    display: none;
}

/*
	main
	----------------------------------------------------------------------
*/

.xx {
	height:26px;
	padding-top:10px;
	width:100%;
	margin:auto;
	top:80px;
	position:relative;
	display:block;
	z-index:2;
}
@media not screen and (min-width: 1000px) {
	.xx { 
		max-width:1000px;
	}
}

.vv {
	display:block;
	line-height:38px;
	text-align:center;
}
.vv a {
	color:#fff;
	text-decoration: none;
}
.vv a:hover {
	text-decoration: underline;
}
.vv a:visited {
	color:#fff;
}
@media screen and (min-width: 872px) {
	.vv { 
		display:none;
	}
}

.xd {
	height:40px;
	width:100%;
	top:124px;
	position:absolute;
	display:block;
	color:#eee;
}
.xr {
	margin:auto;
	max-width:960px;
	overflow:hidden;
	border-radius:12px;
	padding-top:4px;
	height:100%;
}
.xb {
	padding-top:12px;
	margin:auto;
	max-width:970px;
	overflow:hidden;
	padding-left:64px;
	height:100%;
	color:#fff;
}
.vx a {
    margin-top:6px;
	text-decoration: none;
	color:#aaa;
}
.vx a:visited {
	color:#aaa;
}
.vx a:hover {
	text-decoration: underline;
}
.vx span {
	margin-right:6px;
	font-size:15px;
	float:left;
}
.vx .facebook {
	float:left;
	padding:0px 4px 0px 4px;
}
.vx .facebook img{
 	width:24px; 
	padding:5px 0px 0px 8px;
}
.vx .twitter {
	float:left;
}
.vx .twitter img{
 	width:29px; 
	padding:5px 0px 0px 0px;
	margin-left:-2px;
}
.vx .locale {
	float1:left;
	display:inline-block;
	white-space: nowrap;
	width:200px;
}
.vx .locale img {
	width:20px;
	float:left;
	margin-top:0px;
	margin-right:2px;
}
.vx .locale span {
	padding:14px 0px 0px 0px;
	color:#aaa;
}
.vx .blog {
	float:left;
	padding:1px 4px 0px 12px;
}
.vx .blog span {
	float:left;
	padding:8px 0px 0px 8px;
	color:#444;
	font-weight:bold;
}
.vx .blog img{
	float:left;
 	width:30px; 
	padding:2px 0px 0px 0px;
}
.vx .phone {
	float:left;
	padding:14px 10px 0px 4px;
}
.vx .call {
	float:left;
	padding:1px 0px 0px 4px;
}
.vx .call span {
	float:left;
	padding:8px 0px 0px 8px;
	color:#444;
	font-weight:bold;
}
.vx .call img {
	float:left;
 	width:30px; 
	padding:4px 0px 0px 8px;
}

.x1 {
	border-radius:8px;
	max-width:960px;
	padding-left:209px;
	padding-left:94px;
	height:37px;
	margin:10px 0px 10px 0px;
}
@media not screen and (min-width: 872px) {
	.vx {
		display:none;
	}
}

.xi {
	float:left;
	height:24px;
	padding:10px 0px 0px 0px;
	margin:0px 12px 0px 12px;
	font-size:14px;
	font-weight:bold;
	color:#444;
}
.xi a {
	color:#444;
	text-decoration: none;
}
.xi a:visited { 
    color:#444;
}
.xi[sel="HS"] {
	color:#444;
	border-bottom:4px solid #444;
}
.xi[sel="RT"] {
	border-bottom:3px solid #fff;
}
.xi[sel="CS"] {
	border-bottom:3px solid #fff;
}
.xi[sel="XX"] {
	border-bottom:3px solid #fff;
}
.xi a:hover { 
	text-decoration: underline;
}
.xi:hover ul {
	display:block;
}
.xi span {
	padding-left:0px;
	margin-left:0px;
}
.xk {
	float:left;
	height:25px;
	padding:8px 0px 0px 0px;
	margin:0px 12px 0px 12px;
	font-size:15px;
	color:#fff;
}
.xa {
	float:left;
  	width: 0; 
  	height: 0; 
	margin:8px 8px 8px 8px;
  	border-top: 10px solid transparent;
  	border-bottom: 10px solid transparent;
  	border-left: 10px solid #fff;
}

.qq {
	margin:auto;
	max-width:970px;
	overflow:hidden;
	height:320px;
	background:#ff0000;
	margin-top:-80px;
}

.t2 {
	height:54px;
	width:100%;
	top:0px;
	padding-top:6px;
	background:#fff;
	position:absolute;
	z-index:998;
	position: fixed;
}
.t2[fade="1"] {
	background-color: rgba(255,255,255,0.7);
}
.t2[fixed="1"] {
  	top: 0;
	box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.40);
}
.t2[embed="1"] {
  	top: 0;
	box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.40);
}

.logo {
	float:left;
	width:240px;
	opacity1:1;
	margin-left:4px;
	margin-right:10px;
	margin-top:7px;
}
@media not screen and (min-width: 440px) {
	.logo {
		margin-left:12px;
	}
}
.imgl {
	position:relative;
	float:left;
	left:0px;
	top:0px;
	width:32px;
	height:32px;
	margin-right:6px;
	margin-top:10px;
	z-index:999;
}

.t1 .locale {
	color:#aaa;
	padding-left:8px;
	padding-right:28px;
	margin-top:-9px;
	padding-top:4px;
	font-size:15px;
	float1:left;
	white-space: nowrap;
	height:22px;
	width1:600px;
	overflow:hidden;
}
.t1 .locale img {
	width:20px;
	float:left;
	margin-top:0px;
	margin-right:2px;
}
.t1 .locale-line {
	background:-webkit-linear-gradient(left, #ccc, #fff);
	height:1px;
	margin-top:-20px;
	margin-left:192px;
	width:300px;
}
@media not screen and (min-width: 600px) {
	.t1 .locale-line {
		width:200px;
	}
}
@media not screen and (min-width: 440px) {
	.t1 .locale-line {
		margin-left:162px;
		width:120px;
	}
}

@media not screen and (min-width: 1016px) {
	.imgl {
		margin-right:0;
		margin-left:16px;
	}
}

.menu {
	float:right;
	margin:auto;
	position:relative;
	width:36px;
	height:32px;
	margin-top:4px;
	padding-top:2px;
	padding-left:12px;
	margin-right:12px;
	border:1px solid #ccc;
	border-radius:6px;
	display: inline-block;
    cursor: pointer;
}
@media screen and (min-width: 972px) {
	.menu {
		display:none;
	}
}
.bar1, .bar2, .bar3 {
    width: 24px;
    height: 3px;
    background-color: #777;
    margin: 5px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 6px) ;
    transform: rotate(-45deg) translate(-4px, 6px) ;
}
.change .bar2 {
    opacity: 0;
}
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -8px) ;
    transform: rotate(45deg) translate(-4px, -8px) ;
}

.fr {
	margin:auto;
	max-width:970px;
	overflow:hidden;
	height:100%;
}

.me {
	position:absolute;
	margin-top:76px;
	margin-left:62px;
	color:#ccc;
	font-size:14px;
	display:none;
	text-shadow1:-1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
}

.fr .call {
	display:inline-block;
	padding-left:32px;
}
.fr .call span {
	float:left;
	padding:2px 0px 0px 8px;
	color:#0070c8;
	font-weight:bold;
	font-size:22px;
	font-weight:bold;
}
.fr .call span a, .fr .call span a:hover, .fr .call span a:visited {
	color:#0070c8;
}
.fr .call .icon {
	float:left;
 	width:24px; 
 	height:24px; 
	padding:6px 0px 0px 0px;
}
.fr .call .icon[type="call"] {
	background-image: url(img/call.png);
	background-size: 24px 24px;
	background-position: center center;
	background-repeat: no-repeat;
}
.fr .call .icon[type="mobile"] {
	background-image: url(img/mobile.png);
	background-size: 24px 24px;
	background-position: center center;
	background-repeat: no-repeat;
}
.fr .call .icon[type="viber"] {
	background-image: url(img/viber.png);
	background-size: 24px 24px;
	background-position: center center;
	background-repeat: no-repeat;
}

.rr {
	position:absolute;
	z-Index:2;
	top:40px;
	width:100%;
	display:none;
}

.m1 {
	float:left;
	max-width:840px;
	padding-left:3px;
	height:70px;
}
@media not screen and (min-width: 972px) {
	.vm {
		display:none;
	}
	.me {
		display:none;
	}
	.rr {
		display:none;
	}
}

.mi {
	float:left;
	height:32px;
	margin-top:8px;
	padding:8px 12px 0px 12px;
	box-sizing: border-box;
	font-size:15px;
	color:#444;
}

.mi[reg="1"] {
	font-weight:bold;
	margin-left1:10px;
	margin-right1:4px;
	color:#0070c8;
}
.mi[sup="1"] {
	font-weight:bold;
	margin-left1:10px;
	margin-right1:4px;
	color:#0070c8;
}
.mi[sel="1"][type="HS"] {
	background:#06A5B1;
}
.mi[sel="1"][type="RT"] {
	background:#E94486;
}
.mi[sel="1"][type="BT"] {
	background:#999;
}
.mi[sel="1"][type="SS"] {
	background:#0070c8;
}
.m1:hover .mi {
	background:inherit;
}
.mi:hover[type="HS"] {
	background:#06A5B1;
}
.mi:hover[type="RT"] {
	background:#E94486;
}
.mi:hover[type="BT"] {
	background:#999;
}
.mi:hover[type="SS"] {
	background:#0070c8;
}

.mi span {
	color:#444;
}
.mi a {
	color:#444;
	text-decoration: none;
}
.mi a:visited {
	color:#444;
	text-decoration: none;
}
.mi[reg="1"] a {
	color:#0070c8;
}
.mi[sup="1"] a {
	color:#0070c8;
}
.mi[sel="1"] .mb a {
	color:#fff;
}
.mi:hover .mb a {
	color:#fff;
}
.mi[sel="1"] .mb a:visited { 
    color:#fff;
}
.m1:hover .mi .mb a { 
    color:#000;
}
.m1:hover .mi .mb a:visited { 
    color:#000;
}
.m1:hover .mi:hover .mb a { 
    color:#fff;
}
.m1:hover .mi:hover .mb a:visited { 
    color:#fff;
}
.mi[reg="1"] a:visited {
	color:#0070c8;
}
.mi[sup="1"] a:visited {
	color:#0070c8;
}
.mi a:hover { 
	color: #0070c8;
}
.mi ul a:hover { 
	text-decoration: underline;
}
.mi:hover { 
	color:#777;
}
.mi .mb { 
	height:38px;
	box-sizing: border-box;
	position:relative;
}
.mi .mb1[menu="1"] {
	margin-right:16px;
}
.mi .mb-[menu="1"]:after { 
	content: "\25BE";
	color:#777;
	font-size:22px;
	position:absolute;
	float1:left;
	left:0px;
	top:3px;
}
.mi:hover .mb[menu="1"]:after { 
	color:#fff;
}
.mi[sel="1"] .mb[menu="1"]:after { 
	color:#fff;
}
.mi:hover[drp="1"] ul a { 
	color:#444;
}
.mi:hover[drp="1"] ul li:hover a { 
	color: #0070c8;
	text-decoration: underline;
}

.mi ul {
	visibility: hidden;
	list-style: none;
	-webkit-padding-start:0;
	border-bottom: 1px solid #ccc;
	padding-top:4px;
	margin-top:-4px;
	line-height:32px;
	font-size: 15px;
	position: absolute;
	background:#fff;
	color:#444;
	z-index:2;
	border-top:1px solid #ccc;
	height:0px;
	left:0;
	width:100%;
	box-shadow: 0 2px 6px -2px #444;
}
.mi ul[type="HS"] {
	border-top:4px solid #fff;
}
.mi ul[type="RT"] {
	border-top:4px solid #fff;
}
.mi ul[type="BT"] {
	border-top:4px solid #999;
}
.mi ul li {
	padding-top:1px;
}
.mi ul li[lnk="1"] {
	margin-left:16px;
	padding-left:10px;
	border-left:6px solid #fff;
}
.mi ul li[hdr="1"] {
	font-weight:bold;
	font-size:12px;
	margin-top:20px;
	margin-bottom:4px;
	margin-left:32px;
	line-height:22px;
	border-bottom:2px solid #ccc;
}
.mi ul li[img="0"] {
	margin-left:30px;
}
.mi ul[type="HS"] li[hdr="1"] {
	color:#06A5B1;
}
.mi ul[type="RT"] li[hdr="1"] {
	color:#E94486;
}
.mi ul li[sel="1"] {
	background:#ccc;
}
.mi ul li img {
	float:left;
	width:32px;
	height:32px;
	top:2px;
	margin-left:-38px;
	margin-right:6px;
	//top:-8px;
	//filter:grayscale(100%);
}
.mi ul li .vv {
	float:left;
	border-left:2px solid #ddd;
}
.mi ul li[sel="1"] img {
	filter:grayscale(0%);
}
.mi ul li:hover img {
	filter:grayscale(0%);
}
.mi ul hr {
	border: 0;
	margin-top:4px;
	margin-bottom:4px;
	border-top:1px solid #eee;
}
.mi ul hr[full="1"] {
	width:856px;
	border-top:1px solid #ccc;
}
.mi ul hr[disp="0"] {
	border-top:1px solid #ccc;
}
.mi:hover ul {
	visibility: visible;
	height:412px;
}
.mi:hover ul[type="HS"] {
	height:410px;
}
.mi:hover ul[type="RT"] {
	height:360px;
}
.mi:hover ul[type="XX"] {
	height:180px;
}
.mi:hover ul[type="BT"] {
	height:350px;
}
.mi:hover ul li {
	opacity:1;
}
.mi:hover ul hr {
	opacity:1;
}
.sl {
	margin:auto;
	max-width:894px;
	padding-top:4px;
	overflow:hidden;
	position:relative;
}
.ml {
	width:252px;
	float:left;
	margin:8px 24px 8px 8px;
}
.mi img {
	width:32px;
	height:32px;
	top:-8px;
	position:relative;
}
.mi .bul {
	width:32px;
}

@media not screen and (min-width: 1000px) {
	.mq {
		display1:none;
	}
}

.bb {
}
.bb[img="1"] {
	margin-top:-360px;
}
@media not screen and (min-width: 872px) {
	.bb[img="1"] {
		margin-top:-320px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[img="1"] {
		margin-top:-160px;
	}
}
.bb[non="1"] {
	margin-top:-460px;
}
@media not screen and (min-width: 872px) {
	.bb[non="1"] {
		margin-top:-390px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[non="1"] {
		margin-top:-400px;
	}
}
.bb[dy1="1"] {
	margin-top:-140px;
}
@media not screen and (min-width: 872px) {
	.bb[dy1="1"] {
		margin-top:-120px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[dy1="1"] {
		margin-top:-100px;
	}
}
.bb[dy2="1"] {
	margin-top:-281px;
}
@media not screen and (min-width: 872px) {
	.bb[dy2="1"] {
		margin-top:-200px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[dy2="1"] {
		margin-top:-140px;
	}
}
.bb[dy0="1"] {
	margin-top:-500px;
}
@media not screen and (min-width: 872px) {
	.bb[dy0="1"] {
		margin-top:-374px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[dy0="1"] {
		margin-top:-374px;
	}
}
.bb[dy3="1"] {
	margin-top:-220px;
}
@media not screen and (min-width: 872px) {
	.bb[dy3="1"] {
		margin-top:-160px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[dy3="1"] {
		margin-top:-120px;
	}
}
.bb[dy4="1"] {
	margin-top:-180px;
}
@media not screen and (min-width: 872px) {
	.bb[dy4="1"] {
		margin-top:-110px;
	}
}
@media not screen and (min-width: 600px) {
	.bb[dy4="1"] {
		margin-top:-110px;
	}
}

.bs {
	margin-top:-102px;
}
.bb[nos="1"] {
	opacity:0.2;
}

.bw {
	margin:auto;
	overflow:hidden;
	max-width:970px;
}
.bw .list{
	float:left;
	max-width:720px
}
.bw .disp{
	font-size:16px;
	overflow:hidden;
}
.bw .disp ul{
	list-style: none;
	-webkit-padding-start:0;
	color:#444;
	padding-left:24px;
}
.bw .disp ul li {
	padding-bottom:8px;
}
.bw .disp ul li[type="HDR"] {
	font-weight:bold;
	padding-top:24px;
}
.bw .disp ul li[type="CAT"] {
	padding-left:16px;
}

/*
	load
	----------------------------------------------------------------------
*/

.load {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1;
	background-color: rgba(0,0,0,0.3);
	display:none;
}
.load[loading="yes"] {
    display:inline;
	z-index: 999;
}

.spinner {
	margin:auto;
	position: relative;
	top:50%;
  	width: 70px;
  	text-align: center;
	width:200px;
	height:200px;
	z-Index:999;
}

.spinner > div {
  width: 44px;
  height: 44px;
  background-color: #eee;
	border: 2px solid #aaa;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/*
	popup
	----------------------------------------------------------------------
*/
.overlay {
  	position: fixed;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	background: rgba(0, 0, 0, 0.6);
  	transition: opacity 500ms;
  	visibility: hidden;
  	opacity: 0;
	z-index:1999;
}
.overlay[vis="1"] {
  	visibility: visible;
  	opacity: 1;
}

.popup {
  	margin: -80px auto;
  	padding: 20px;
	top:40%;
  	background: #fff;
  	border-radius: 5px;
  	width: 600px;
  	position: relative;
	box-sizing:border-box;
	box-shadow: 0px 0px 15px 1px #222;
}
@media not screen and (min-width: 652px) {
	.popup {
		width: 100%;
		border-radius: 0px;
	}
}
.popup H3 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color:#0000ff;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
	font-size:18px;
}
.popup .okbtn {
    padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 24px;
	padding-right: 24px;
    background: #86d1f0;
    border: none;
    border-radius: 4px;
    margin-top: 12px;
    margin-bottom: 4px;
}

/*
	xn
	----------------------------------------------------------------------
*/
.xn {
	display:none;
	position:fixed;
	top:58px;
	background:#fff;
	height:100%;
	width:100%;
	overflow-y:scroll;
	border-top:2px solid #ccc;
}
.xn[vis="1"] {
	display:inline;
}
.xn ul {
	list-style: none;
	-webkit-padding-start:0;
	padding:12px 12px 12px 0px;
	line-height:30px;
	background:#fff;
	width:100%;
	margin-top:0;
}
.xn ul a{
	color:#444;
	text-decoration: none;
}
.xn ul a:visited{
	color:#444;
	text-decoration: none;
}
.xn ul li {
	padding:6px 8px 4px 16px;
	overflow:hidden;
	height:32px;
	border-bottom:1px solid #eee;
	position:relative;
}
.xn ul li:hover{
	background:#ccc;
}
.xn ul li[menu="1"]:after { 
	content: "\25BE";
	color:#444;
	font-size:24px;
	position:absolute;
	padding-left:2px;
	top:0px;
	right:0px;
	margin-top:4px;
	right:32px;
}
.xn ul li[hdr="1"] {
	font-size:14px;
	font-weight:bold;
	border-bottom:2px solid #ccc;
	color:#444;
}
.xn ul li[sel="1"] {
	background:#ccc;
	filter:grayscale(0%);
}
.xn ul li img {
	float:left;
	width:20px;
	height:20px;
	margin-top:5px;
	margin-left:-2px;
	margin-right:4px;
	filter:grayscale(100%);
}
.xn ul li[pcc="1"] img {
	width:32px;
	height:32px;
	margin-top:0px;
	filter:none;
}
.xn ul li[reg="1"] {
	color:#0070c8;
}
.xn ul li[sup="1"] {
	color:#0070c8;
}

.b1 {
	height:440px;
	background:#008000;
}

.b2 {
	height:240px;
	background:#800000;	 
}

.b5 .adv {
	position:relative;
}
.b4 .sel {
	width:100%;
	height:60px;
	margin-top:-180px;
	position:absolute;
	z-Index:2;
	display:block;
	background1:#ff0000;
}
@media not screen and (min-width: 872px) {
	.b4 .sel {
		margin-top:-136px;
	}
}

.b5 {
	overflow:hidden;
	margin-top:38px;
}
.b5 .bck {
	height:500px;
	margin-top:-14px;
	box-sizing: border-box;
	border-top: 16px solid rgba(255, 255, 255, .4);
	border-bottom: 16px solid rgba(255, 255, 255, .4);
	background:#777;
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
}
.b5 .bck[nb="1"] {
	border-top:0;
	border-bottom:0;
}
@media not screen and (min-width: 872px) {
	.b5 .bck {
		border-top: 0;
		margin-top:-54px;
		height:400px;
		background-size: cover;
	}
}
.b5 .bck[eff="0"] {
	border-top: 2px solid #bbb;
	border-bottom: 0;
}

.ani {
	background:#fff;
	height:500px;
	width:100%;
	animation-name: anifade;
	-webkit-animation-name: anifade;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity:0;
}
@keyframes anifade {
	0% {
		opacity:1;
	}		
	100% {
		opacity:0;
		visibility:hidden;
	}		
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@media screen and (min-width: 1300px) {
	.b5 .bck {
		background-size: 100%;
	}
	.b5 .bck img {
		width:100%;
	}
}

.b5 .brs {
	position:absolute;
	top:448px;
	margin:auto;
	margin-left:44px;
	overflow:hidden;
	background-image: url(img/brs.png);
	background-size: 100%;
	width:112px;
	height:46px;
	z-index:2;
}
.b5 .brs[ndx="1"] {
	top:348px;
}
@media not screen and (min-width: 872px) {	
	.b5 .brs {
		display:none;
	}
}

.b5 .pls {
	position:absolute;
	top:400px;
	margin:auto;
	margin-left:auto;
	margin-left:44px;
	overflow:hidden;
	background-image: url(img/googleplay.png);
	background-size: 100%;
	border:4px solid #fff;
	border-radius:16px;
	width:146px;
	height:46px;
	z-index:2;
}
@media not screen and (min-width: 872px) {
	.b5 .pls {
		top:324px;
	}
}
@media not screen and (min-width: 600px) {
	.b5 .pls {
		top:344px;
	}
}

.b5 .dmo {
	position:absolute;
	top:362px;
	margin:auto;
	margin-left:40px;
	overflow:hidden;
	background-image: url(img/demo.jpg);
	background-size: 100%;
	width:262px;
	height:132px;
	z-index:2;
}

.flag {
	width:48px;
	display:inline-block;
	padding:2px 2px 2px 2px;
	margin-left:8px;
	margin-top:8px;
	border:1px solid #444;
	border-radius:8px;
}

.getapp {
	display:inline-block;
	margin-left:12px;
	margin-right:12px;
	overflow:hidden;
	background-size: 100%;
	border:4px solid #ccc;
	border-radius:16px;
	width:146px;
	height:46px;
	z-index:2;
	margin-top:4px;
	margin-bottom:4px;
}
.getapp[type="googleplay"] {
	background-image: url(img/googleplay.png);
}
.getapp[type="appstore"] {
	background-image: url(img/appstore.png);
}
.getapp[type="appgallery"] {
	background-image: url(img/appgallery.png);
}
.getapp[type="pcc"] {
	background-image: url(img/pcc.png);
}

.f1 .lo {
	margin:auto;
	max-width:970px;
	width:100%;
	margin-top:-10px;
	box-sizing: border-box;
	padding-right:16px;
	font-size:16px;
	font-weight1:bold;
	height:40px;
	color:#777;
	background:#444;
	white-space: nowrap;
}
.f1 .lo a {
	background:#fff;
	border:1px solid #aaa;
	margin-right:12px;
	line-height:40px;
	border-radius:4px;
	padding:6px 12px 6px 12px;
	text-decoration: none;
	color:#666;
}
.f1 .lo a:visited {
	text-decoration: none;
	color:#666;
}

.b5 H2 {
	position:absolute;
	margin:auto;
	max-width:970px;
	width:100%;
	box-sizing: border-box;
	margin-top:78px;
	padding-left:46px;
	padding-right:16px;
	font-size:28px;
	font-weight:normal;
	text-shadow: 1px 1px #000;
	color:#ffffff;
	white-space: nowrap;
}
.b5 H2[rev="1"] {
	text-shadow: 2px 2px #ccc;
	color:#222;
}
.b5 H2[mid="1"] {
	padding-left:16px;
	text-align:center;
}
@media not screen and (min-width: 872px) {
	.b5 H2 {
		margin-top:32px;
		//padding-left1:16px;
	}
}
@media not screen and (min-width: 440px) {
	.b5 H2 { 
		margin-top:40px;
		padding-left:16px;
	}
}
.b5 H1 {
	position:absolute;
	margin:auto;
	max-width:970px;
	text-align1:center;
	width:100%;
	box-sizing: border-box;
	margin-top:148px;
	padding-left:46px;
	padding-right:16px;
	font-size:44px;
	font-weight:normal;
	text-shadow: 2px 2px #000;
	color:#fff;
	overflow:hidden;
	max-height:168px;
	word-wrap: break-word;
	text-overflow: ellipsis;
}
.b5 H1[mid="1"] {
	padding-left:16px;
	text-align:center;
}
.b5 H1[bck="1"] {
	background-color: rgba(0,0,0,0.6);
	padding:20px 20px 30px 30px;
	margin-top:128px;
	text-shadow: 0px 0px #000;
	border-left:16px solid #eee;
	box-sizing: border-box;
}
.b5 H1[rev="1"] {
	text-shadow: 2px 2px #ccc;
	color:#222;
}
@media not screen and (min-width: 872px) {
	.b5 H1 { 
		font-size:32px;
		background-color: rgba(0,0,0,0.6);
		padding-top:20px;
		padding-bottom:20px;
		margin-top:80px;
	}
	.b5 H1[bck="1"] {
		margin-top:80px;
	}
}
@media not screen and (min-width: 440px) {
	.b5 H1 { 
		font-size:24px;
		padding-left:16px;
		margin-top:92px;
	}
	.b5 H1[bck="1"] {
		margin-top:92px;
		padding-left:16px;
		border-left:0px;
	}
}
.b5 H3 {
	position:absolute;
	margin:auto;
	max-width:970px;
	text-align1:center;
	width:100%;
	margin-top:312px;
	padding-left:46px;
	padding-right:16px;
	box-sizing: border-box;
	font-size:24px;
	font-weight:normal;
	text-shadow: 1px 1px #000;
	color:#fff;
}
@media not screen and (min-width: 872px) {
	.b5 H3 {
		padding-top:20px;
		padding-bottom:20px;
		margin-top:232px;
		font-size:20px;
	}
}
@media not screen and (min-width: 440px) {
	.b5 H3 { 
		padding-left:16px;
		font-size:18px;
	}
}
.b5 .link {
	position:absolute;
	margin:auto;
	max-width:970px;
	text-align:center;
	width:180px;
	margin-top:306px;
	margin-left:46px;
	height:48px;
	line-height:48px;
	border-radius:6px;
	font-size:18px;
	font-weight:normal;
	text-shadow: 1px 1px #444;
	background:#0070c8;
	color:#fff;
	border:3px solid #ddd;
	box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.6);
}
@media not screen and (min-width: 872px) {
	.b5 .link {
		margin-top:246px;
	}
}
@media not screen and (min-width: 400px) {
	.b5 .link {
		left:0;
		right:0;
		margin-left:20px;
		margin-right:20px;
		width:auto;
	}
}
.b5 .link[type="HS"] {
	background:#6aaab3;
	border:3px solid #222;
}
.b5 .link[type="RT"] {
	background:#EF72A4;
	border:3px solid #222;
}
.b5 .pdf {
	position:absolute;
	top:70%;
	width:80px;
	height:120px;
	border-radius:6px;
	border: 4px solid #cccccc;
}
.b5 .pdf img {
	width:100%;
	height:100%;
}

.b5 .cr {
	position:relative;
	display:inline-block;
	width:24px;
	height:24px;
	margin:0px 4px 0px 4px;
	border: 2px solid #444;
	border-radius:50%;
	top:194px;
}
@media not screen and (min-width: 600px) {	
	.b5 .cr {
		width:32px;
		height:32px;
		top:218px;
	}
}
.b5 .cr[sel="1"] {
	background:#0070c8;	 
}
.b5 .cr:hover {
	background:#ccc;	 
}

.b4 .ar {
	float:right;
	color:#444;
	font-size:92px;
}
.b4 .ar:hover {
	opacity:0.6;
}
@media not screen and (min-width: 1100px) {
	.b4 .ar { 
		display:none;
	}
}

.b4 .al {
	float:left;
	color:#444;
	font-size:92px;
}
.b4 .al:hover {
	opacity:0.6;
}

@media not screen and (min-width: 1100px) {
	.b4 .al { 
		display:none;
	}
}

/*
	b4
	----------------------------------------------------------------------
*/
.b4 {
	padding:56px 0px 56px 0px;
	overflow: hidden;
	color:#555;
}
@media not screen and (min-width: 600px) {
	.b4 {
		padding:32px 0px 32px 0px;
	}
}
.b4[row="1"] {
	padding:24px 0px 24px 0px;
}
.b4[img="1"] {
	border-top: 4px solid rgba(128, 128, 128, .4);
	border-bottom: 4px solid rgba(128, 128, 128, .4);
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
}
@media not screen and (min-width: 1000px) {
	.b4[img="1"] {
		background-size: inherit;
		background-size: cover;
	}
}
.b4[kk="1"] {
	margin-top:-140px;
}
@media not screen and (min-width: 600px) {
	.b4[kk="1"] {
		margin-top:-50px;
	}
}

.b4[ss="1"] {
	margin-top:100px;
}
@media not screen and (min-width: 1000px) {
	.b4[ss="1"] {
		margin-top:0px;
	}
}

.b4 H3 {
	color:#444;
	padding-bottom:4px;
	margin-bottom:2px;
}
.b4 H4 {
	color:#777;
	padding:16px 16px 0px 16px;
	margin:0px 0px 0px 0px;
	font-size:22px;
	font-weight:normal;
	line-height:30px;
}
.b4 .ii {
	overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
	padding-left:16px;
	padding-right:16px;
}
.b4 .ii-scroll {
	width:954px;
}
.b4 .ii li {
	float:left;
	list-style: none;
	margin-bottom:12px;
	margin-right:8px;
}
.b4 .ii a li:hover {
	opacity:0.6;
}
.b4 .ii li[pos="1"] {
	width:212px;
}
.b4 .ii li[web="1"] {
	width:232px;
}
.b4 .ii li[pda="1"] {
	width:124px;
}
.b4 .ii li[pcc="1"] {
	width:212px;
}
.b4 .ii li[mgr="1"] {
	width:90px;
}
.b4 .ii li[ods="1"] {
	width:210px;
}
.b4 .ii li[pho="1"] {
	width:86px;
}
.b4 .ii li .box[pos="1"] {
	border:3px solid #444;
	border-radius:8px;
	box-sizing: border-box;
	height:170px;
	margin-top:3px;
	margin-bottom:3px;
	box-shadow: 0px 0px 4px 1px #777;
	padding:1px 1px 1px 1px;
	background:#999;
}
.b4 .ii li .box[pos="1"] img {
	border-radius:4px;
}
.b4 .ii li .box[pda="1"] {
	border-radius:12px;
	background-image: url(page/xphone.png);
	background-repeat: no-repeat;
	background-size:84px 174px;
	background-position: 20px 0px;
	padding:6px 26px 7px 25px;
	box-sizing: border-box;
	height:174px;
}
.b4 .ii li .box[pda="1"] img {
	border-radius:12px;
	border:1px solid #777;
}
.b4 .ii li .web[pcc="1"] {
	height:174px;
}
.b4 .ii li .box[mgr="1"] {
	border-radius:12px;
	background-image: url(img/Android-phone.png);
	background-repeat: no-repeat;
	background-size:90px 160px;
	background-position: 0px 0px;
	padding:12px 12px 12px 12px;
	box-sizing: border-box;
	height:160px;
}
.b4 .ii li .box[ods="1"] {
	padding:0px 12px 0px 12px;
	height:174px;
}
.b4 .ii li .box[pho="1"] {
	border-radius:50%;
	overflow:hidden;
	box-sizing: border-box;
	height:86px;
}
.b4 .ii li img {
	width:100%;
	height:100%;
}
.b4 .ii li .box[pho="1"] img {
	filter:grayscale(100%);
}
.b4 .ii li H5 {
	margin-top:16px;
	padding-top:0px;
	//line-height:44px;
	text-align:center;
	margin-left:12px;
	margin-bottom:8px;
	padding-bottom:4px;
	font-size:16px;
	color:#444;
	text-shadow: 1px 1px #fff;
	border-bottom:2px solid #eee;
}
.b4 .ii li p {
	line-height:22px;
	font-size:15px;
	margin-top:0px;
	//text-align:center;
	//padding-left:12px;
	color:#444;
	padding-bottom:12px;
	//text-shadow: 1px 1px #fff;
}
.b4 .ii-img {
	max-width:460px;
	box-shadow1: 0 0 5px 3px #999;
}
@media not screen and (min-width: 660px) {
	.b4 .ii-img {
		width:90%;
	}
}
.b4 .go {
	width:400px;
	margin:auto;
}
@media not screen and (min-width: 440px) {
	.b4 .go  {
		width:260px;
	}
}
.b4 .go .link {
	text-align:center;
	width:180px;
	height:48px;
	float:left;
	line-height:48px;
	margin-right:20px;
	border-radius:4px;
	font-size:18px;
	font-weight:normal;
	text-shadow: 1px 1px #444;
	background:#0070c8;
	color:#fff;
}
@media not screen and (min-width: 440px) {
	.b4 .go .link {
		width:110px;
	}
}
.b4 .go .link[type="HS"] {
	background:#6aaab3;
}
.b4 .go .link[type="RT"] {
	background:#EF72A4;
}

.b4 .pc {
	overflow:hidden;
}
.b4 .pc H3 {
	padding:0px 16px 16px 16px;
	color:#444444;
	font-size:32px;
	font-weight:normal;
	margin:0;
}
.b4 .pc H4 {
	padding-top:0px;
	padding-bottom:8px;
}
.b4 .pc .text {
	padding:0px 64px 0px 64px;
	font-size:15px;
	line-height:22px;
	margin:0;
}
@media not screen and (min-width: 872px) {
	.b4 .pc .text {
		padding:0px 24px 0px 24px;
	}
}
.b4 .pc .link {
	padding:6px 0px 8px 0px;
	display:inline-block;
	font-size:15px;
	height:20px;
	line-height:20px;
	width:160px;
	margin-top:12px;
	margin-bottom:12px;
	border:2px solid #0070c8;
	box-shadow: 2px 2px 4px #777;
	background: rgba(224, 224, 224, 0.8);
	color:#0070c8;
	border-radius:4px;
	text-align:center;
}
.b4 .pc .link:hover {
	background:#0060c0;
	color:#fff;
}

.b4 .pc img1 {
	overflow:hidden;
	width:640px;
	box-sizing: border-box;
}
.b4 .pc img[type="s-l"] {
	box-sizing: border-box;
}
.b4 .pc img[type="s-s"] {
	width:600px;
	box-sizing: border-box;
}
@media not screen and (min-width: 760px) {
	.b4 .pc img[type="s-l"] {
		width:90%;
		margin-left:5%;
		margin-right:5%;
		//margin-top:40px;
		margin-bottom:40px;
	}
	.b4 .pc img[type="s-s"] {
		width:100%;
	}
}
.b4 .pc img[frame="1"] {
	border-radius1:4px;
	box-shadow: 0px 0px 8px 2px #444;
}

.b4 .pc img[type="4"] {
	max-width:440px;
}
@media not screen and (min-width: 600px) {
	.b4 .pc img[type="4"] {
		width:90%;
	}
}

.b4 .pc img[type="8"] {
}
@media not screen and (min-width: 800px) {
	.b4 .pc img[type="1"] {
		width:100%;
	}
}

.b4 .pc img[type="f"] {
	width:48px;
	filter:grayscale(100%);
}

.b4 .pc .phone {
	position:relative;
	top:-360px;
	left:140px;
	width:480px;
}
.b4 .pc .phone img[type="phone"] {
	right:0px;
	width:340px;
	position:absolute;
}
.b4 .pc .phone img[type="shots"] {
	right:105px;
	top:20px;
	width:188px;
	height:406px;
	border-radius:8px;
	position:absolute;
}
.b4 .pc .phone .video-panel {
	right:104px;
	top:20px;
	width:190px;
	height:386px;
	border-radius:8px;
	position:absolute;
}
.b4 .pc .phone .video-panel video {
	width:100%;
	border-radius:8px;
}
@media not screen and (min-width: 600px) {
	.b4 .pc .phone {
		position:relative;
		top:-320px;
		left:0px;
		width:480px;
	}
}
@media not screen and (min-width: 440px) {
	.b4 .pc .phone {
		position:relative;
		top:-300px;
		left:0px;
		width:400px;
	}
}

.b4 .pc img[gray="1"] {
	filter:grayscale(100%);
}

.b4 .pv {
	overflow:hidden;
}
.b4 .pv img {
	overflow:hidden;
	width:540px;
	box-sizing: border-box;
}
@media not screen and (min-width: 560px) {
	.b4 .pv img {
		width:90%;
	}
}

.b4 .pl {
	float:left;
	width:50%; 
	overflow:hidden;
	box-sizing: border-box;
}
.b4 .pl[x40="1"] {
	width:40%; 
}
.b4 .pl[x30="1"] {
	width:30%; 
}
.b4 .pl[x25="1"] {
	width:25%; 
}
.b4 .pl[x20="1"] {
	width:20%; 
}
.b4 .pl[bck="1"] {
	background-size: auto 100%;
	background-repeat: no-repeat;
}
.b4 .pl[bck="E"] {
	background-image: url(img/512x512E.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
}
@media not screen and (min-width: 1000px) {
	.b4 .pl[img="1"] {
		width:100%;
	}
}
@media not screen and (min-width: 872px) {
	.b4 .pl[bck="1"] {
		background-position: -70px 0px;
	}
	.b4 .pl[bck="E"] {
		background-position: -70px 0px;
	}
}
@media not screen and (min-width: 600px) {
	.b4 .pl[bck="1"] {
		background-position: 0px 0px;
	}
	.b4 .pl[bck="E"] {
		background-position: 0px 0px;
	}
}
.b4 .pl[btv="1"] {
	 
}
.b4 .pl .scrframe {
	border-radius: 4px; 
	border:1px solid #999;
	margin-top:28px;
	margin-bottom:28px;
	max-width:438px;
	box-shadow: 0px 0px 8px 2px #777;
}
@media not screen and (min-width: 440px) {
	.b4 .pl .scrframe {
		margin-top:8px;
		margin-bottom:8px;
	}
}
.b4 .pl .basframe {
	margin-top:28px;
	border:1px solid #ccc;
	margin-bottom:28px;
	width:438px;
	box-shadow1: 0px 0px 8px 1px #444;
	opacity:0.94;
}
.b4 .pl[bck="AndroidTablet"] {
	background-image: url(img/Android-tablet.png);
	background-repeat: no-repeat;
	background-size:556px 492px;
	background-position: 0px 0px;
}
.b4 .pl img {
	float:right;
	margin-left:4px;
	margin-right:36px;
	box-sizing: border-box;
}
.b4 .pl .video-panel {
	float:right;
	margin-left:4px;
	margin-right:36px;
	box-sizing: border-box;
	outline: none;  
	position: relative;
}
.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
	right:0px;
	bottom:0px;
    background-image: url(img/play.png);
	background-size: 180px 180px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor:pointer;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.video-overlay[vis="0"] {
	opacity:0;
	animation: none;
}
.b4 .pl[bck="AndroidPhone"] img {
	margin-right:49px;
	margin-top:42px;
	border:1px solid #777;
	box-shadow: 0px 0px 8px 1px #444;
}
.b4 .pl[bck="AndroidPhone"] video {
	margin-right:49px;
	margin-top:42px;
	border:1px solid #777;
	box-shadow: 0px 0px 8px 1px #444;
}
.b4 .pl img[small="2"] {
	padding-top:24px;
}
.b4 .pl img[gray="1"] {
	filter:grayscale(100%);
}
@media not screen and (min-width: 1016px) {
	.b5 .pdf {
		top:200px;
	}
	.b4 .pl {
		padding-left:16px;
	}	
	.b4 .pl[txt_="1"] H2 {
		padding-left:24px;
	}	
	.b4 .pl[txt_="1"] H3 {
		padding-left:24px;
	}	
	.b4 .pl[txt_="1"] .text {
		padding-left:24px;
	}	
}
@media not screen and (min-width: 600px) {
	.b4 .pl {
		float:none;
		width:100%;
		max-width1:500px; 
		padding:0px 16px 0px 16px;
		margin:auto;
	}	
	.b4 .pl[x40="1"] {
		width:100%;
	}	
	.b4 .pl[x30="1"] {
		width:100%;
	}	
	.b4 .pl[x25="1"] {
		width:100%;
	}	
	.b4 .pl[x20="1"] {
		width:100%;
	}	
	.b4 .pl img {
		float:none;
		width:100%;
		max-width:440px;
		margin-left:0px;
	}
	.b4 .pl .video-panel {
		float:none;
		width:100%;
		max-width:440px;
		margin-left:0px;
	}
	.b4 .pl video {
		float:none;
		width:100%;
		max-width:440px;
		margin-left:0px;
	}
	.b4 .pl[bck="AndroidPhone"] img {
		margin-left:16px;
	}
	.b4 .pl[bck="AndroidPhone"] video {
		margin-left:16px;
	}
	.b4 .pl img[small="1"] {
		width:160px;
		margin-left:8px;
		padding-top:0px;
	}
	.b4 .pl img[small="2"] {
		width:80px;
		margin-left:8px;
		padding-top:0px;
	}
}
.b4 .pl H2 {
	padding-top:36px;
	padding-bottom:4px;
	color:#444;
	font-size:28px;
	font-weight:normal;
	margin:0;
}
@media not screen and (min-width: 600px) {
	.b4 .pl H2 {
		padding-top:16px;
	}
}
.b4 .pl H2[rev="1"] {
	color:#fff;
	text-shadow: 1px 1px #222;
}
.b4 .pl H3 {
	padding:10px 36px 0px 0px;
	font-size:17px;
	margin:0;
}
.b4 .pl H3[rev="1"] {
	color:#fff;
	text-shadow: 1px 1px #222;
}
.b4 .pl .text {
	padding:20px 36px 12px 0px;
	padding-top:20px;
	font-size:15px;
	line-height:22px;
	margin:0;
}
.b4 .pl .text[rev="1"] {
	color:#fff;
	text-shadow: 1px 1px #222;
	font-size:16px;
}
.b4 .pl .text a {
	text-decoration: none;
	color:#0070c8;
}
.b4 .pl .text a:visited { 
    color:#0070c8;
}
.b4 .pl .text a:hover { 
	text-decoration: underline;
}
.b4 .pl .link {
	padding:6px 0px 8px 0px;
	display:inline-block;
	font-size:15px;
	height:20px;
	line-height:20px;
	width:160px;
	margin-top:12px;
	margin-bottom:12px;
	border:2px solid #0070c8;
	box-shadow: 2px 2px 4px #777;
	background: rgba(224, 224, 224, 0.8);
	color:#0070c8;
	border-radius:4px;
	text-align:center;
}
.b4 .pl .link:hover {
	background:#0060c0;
	color:#fff;
}
.b4 .pl .link[bck="playstore"] {
	background-image: url(img/googleplay.png);
	background-repeat: no-repeat;
	background-size:144px 34px;
	height:20px;
}
.b4 .pl a {
	text-decoration: none;
	color:#0070c8;
}
.b4 .pl a:hover { 
	color:#fff;
}
.b4 .pr {
	overflow: hidden;
	float:right;
	width:50%; 
	box-sizing: border-box;
}
.b4 .pr[dy="1"] {
	padding-top:100px;
}
@media not screen and (min-width: 872px) {
	.b4 .pr[dy="1"] {
		padding-top:80px;
	}
}
@media not screen and (min-width: 600px) {
	.b4 .pr[dy="1"] {
		padding-top:0px;
	}
}
.b4 .pr[x60="1"] {
	width:60%; 
}
.b4 .pr[x70="1"] {
	width:70%; 
}
.b4 .pr[x75="1"] {
	width:75%; 
}
.b4 .pr[x80="1"] {
	width:80%; 
}
.b4 .pr .scrframe {
	border-radius: 24px; 
	border:4px solid #444;
}
.b4 .pr[bck="AndroidTablet"] {
	background-image: url(img/Android-tablet.png);
	background-repeat: no-repeat;
	background-size:556px 492px;
}
.b4 .pr img {
	box-sizing: border-box;
}
@media not screen and (min-width: 600px) {
	.b4 .pr {
		float:none;
		width:100%;
		max-width1:500px; 
		padding:0px 16px 0px 16px;
		margin:auto;
	}	
	.b4 .pr[x60="1"] {
		width:100%; 
	}
	.b4 .pr[x70="1"] {
		width:100%; 
	}
	.b4 .pr[x75="1"] {
		width:100%; 
	}
	.b4 .pr[x80="1"] {
		width:100%; 
	}
	.b4 .pr[bck="AndroidPhone"] {
		margin-left:12px;
	}
	.b4 .pr img {
		float:none;
		width:100%;
		max-width:440px;
		margin-left:0px;
		margin-right:36px;
	}
	.b4 .pr img[small="1"] {
		width:160px;
		margin-left:8px;
	}
	.b4 .pr img[small="2"] {
		width:80px;
		margin-left:8px;
	}
}
.b4 .pr H2 {
	padding-top:36px;
	padding-bottom:4px;
	color:#444;
	font-size:28px;
	font-weight:normal;
	margin:0;
}
@media not screen and (min-width: 600px) {
	.b4 .pr H2 {
		padding-top:16px;
	}
}
.b4 .pr H3 {
	padding:10px 0px 0px 0px;
	font-size:17px;
	margin:0;
}
.b4 .pr .text {
	padding:20px 36px 12px 0px;
	font-size:15px;
	line-height:22px;
	margin:0;
}
@media not screen and (min-width: 600px) {
	.b4 .pr .text {
		padding-right:0px;
	}
}
.b4 .pr .data {
	padding:4px 36px 24px 0px;
	font-size:15px;
	line-height:22px;
	margin:0;
}
.b4 .pr .link {
	padding:6px 0px 8px 0px;
	display:inline-block;
	font-size:15px;
	height:20px;
	line-height:20px;
	margin-top:12px;
	width:160px;
	margin-bottom:12px;
	border:2px solid #0070c8;
	box-shadow: 2px 2px 4px #777;
	background: rgba(224, 224, 224, 0.8);
	color:#0070c8;
	border-radius:4px;
	text-align:center;
}
.b4 .pr .link:hover {
	background:#0060c0;
	color:#fff;
}
.b4 .pr .link[bck="demo"] {
	background-image: url(img/demo.png);
	background-repeat: no-repeat;
	background-size:144px 34px;
	height:20px;
}
.b4 .pr a {
	text-decoration: none;
	color:#0070c8;
}
.b4 .pr a:visited { 
    color:#0070c8;
}
.b4 .pr a:hover { 
	text-decoration: underline;
}
.b4 .pr .price {
	padding:4px 36px 12px 0px;
	font-size:15px;
	line-height:22px;
	font-weight:bold;
	color:#444;
	margin:0;
}
.b4 .pr .desc {
	padding:0px 36px 24px 0px;
	font-size:20px;
	line-height:28px;
	margin:0;
}
.b4 .pr ul {
	list-style:none;
	margin:0;
	padding:0;
}
.b4 .pr ul li {
	list-style:none;
	line-height:22px;
	padding-left:20px;
	border-bottom:1px solid #eee;
	line-height:32px;
}
.b4 .pr ul li:before {
  	content: "\2714";
	position: absolute;
	margin-left:-20px;
}
.b4 .px {
}
.b4 .px .quote{
	padding:0px 60px 20px 70px;
	font-family: Georgia, serif;
	font-size: 20px;
	font-style: italic;
	line-height: 1.4;
	position: relative;
	color: #383838;
}
.b4 .px .quote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: 14px;
	top: -20px;
	color: #777;
}
.b4 .p3 {
	float:left;
	padding-bottom:12px;
	padding-left:20px;
	box-sizing: border-box;
	width:33%; 
	color:#444;
}
.b4 a .p3:hover {
	background:#eee;
}
.b4 .p3 H3 {
	margin-top:8px;
	margin-bottom:0px;
	padding-bottom:0px;
	text-align:center;
}
.b4 .p3 img {
	margin-top:16px;
	height:48px;
	align:center;
}
.b4 .p3 ul {
	font-size:15px;
	-webkit-padding-start:0;
	list-style:dot;
	line-height:22px;
	color:#444;
	margin-bottom:0px;
}
.b4 .p3 ul li {
	padding-bottom:16px;
	padding-right:20px;
	padding-left:4px;
	color:#444;
}
.b4 .p3 ul li[nil="1"] {
	list-style:none;
	text-align:center;
}
.b4 .p3 span {
	line-height:24px;
}
.b4 .p3 a{
	text-decoration: none;
	color:#fff
}
.b4 .p3 .link {
	padding:6px 16px 8px 16px;
	border-radius:16px;
	display:inline-block;
	font-size:15px;
	height:22px;
	line-height:22px;
	width:160px;
	margin-bottom:12px;
	background:#0070c8;
	color:#fff;
	border-radius:4px;
	text-align:center;
}
.b4 .p3 .link a {
	text-decoration: none;
}

.b4 .q3 {
	float:left;
	padding-bottom:12px;
	padding-left:10px;
	padding-right:10px;
	box-sizing: border-box;
	width:33%; 
	color:#444;
}
@media not screen and (min-width: 1000px) {
	.b4 .q3 {
		width:100%; 
	}
}
.b4 .q3 .banner {
	background:#eee;
	width:270px; 
	height:140px;
}
.b4 .q3 .banner img {
	width:200px;
	height:auto;
}
.b4 .q3 H3 {
	margin-top:12px;
	margin-bottom:4px;
	text-align:center;
	font-size:20px;
}
.b4 .q3 img {
	margin-top:16px;
	height:48px;
	align:center;
}
.b4 .q3 span {
	line-height:22px;
}

.b4 .z3 {
	float:left;
	padding-bottom:12px;
	width:33%; 
	color:#444;
}
@media not screen and (min-width: 1000px) {
	.b4 .z3 {
		width:100%; 
		padding-bottom:0px;
	}
}
.b4 .z3 H3 {
	margin-top:8px;
	margin-bottom:0px;
	padding-bottom:0px;
	text-align:center;
}
.b4 .z3 H4 {
	padding-right:0px;
	padding-left:0px;
}
.b4 .z3 img {
	margin-top:16px;
	width:202px;
	align:center;
	position: relative;
	box-sizing: border-box;	
}
.b4 .z3 img[shot="1"] {
	border:1px solid #777;
	box-shadow: 0px 0px 8px 1px #444;
}
.b4 .z3 .video-panel {	
	margin-top:16px;
	width:200px;
	align:center;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0px 0px 8px 1px #444;
	background:#777;
}
.b4 .z3 video {	
	width:200px;
}
@media not screen and (min-width: 1000px) {
	.b4 .z3[img="1"] {
		display1:none;
	}
}
.b4 .z3[bck="AndroidPhone"] img {
	margin-top1:42px;
	margin-left:57px;
	height:auto;
	align:center;
	border:1px solid #777;
	box-shadow: 0px 0px 8px 1px #444;
}
.b4 .z3[bck="AndroidPhone"] video1 {
	margin-top1:42px;
	margin-left:57px;
	height:auto;
	align:center;
	border:1px solid #777;
	box-shadow: 0px 0px 8px 1px #444;
}
.b4 .z3 ul {
	font-size:15px;
	-webkit-padding-start:0;
	list-style:dot;
	line-height:22px;
	color:#444;
	margin-bottom:0px;
	list-style: none;
}
@media not screen and (min-width: 1000px) {
	.b4 .z3 ul {
		padding-left:16px;
		padding-right:16px;
	}
}
.b4 .z3 ul[l="1"] {
	text-align: right;
}
@media not screen and (min-width: 1000px) {
	.b4 .z3 ul[l="1"] {
		text-align: center;
	}
}
.b4 .z3 ul[r="1"] {
	text-align: left;
}
@media not screen and (min-width: 1000px) {
	.b4 .z3 ul[r="1"] {
		text-align: center;
	}
}
.b4 .z3 ul li {
	padding-bottom:16px;
	color:#444;
}
@media not screen and (min-width: 1000px) {
	.b4 .z3 ul li {
		border-bottom:1px solid #ccc;
	}
}
.b4 .z3 ul li H4 {
	margin-top:-10px;
	margin-bottom:4px;
}
.b4 .z3 ul li img {
	width:48px;
	height:48px;
}
.b4 .z3 ul[l="1"] li img1 {
	position:absolute;
	margin-left:4px;
}
.b4 .z3 ul[r="1"] li img1 {
	position:absolute;
	margin-left:-62px;
}

.b4 .i3 {
}
.b4 .i3 img {
	width:260px;
	margin:12px 12px 24px 12px;
	border-radius:6px;
	box-shadow: 0px 0px 8px 2px #777;
}

.b4 .p0 {
	width:50%; 
	margin:0;
	overflow:hidden;
}
.b4 .p0 .scrframe {
	margin-top:8px;
	margin-bottom:8px;
	box-shadow: 0 0 5px 3px #999;
}
.b4 .p0[bck="AndroidPhone"] {
	background-image: url(img/Android-phone.png);
	background-repeat: no-repeat;
	background-size:228px 400px;
	background-position: 221px 0px;
}
.b4 .p0[bck="AndroidTablet"] {
	background-image: url(img/Android-tablet.png);
	background-repeat: no-repeat;
	background-size:556px 492px;
	background-position: 0px 0px;
}

.b4 .ps {
	float:left;
	padding-left:20px;
	width:30%; 
	color:#444;
}
.b4 .ps img {
	height:32px;
	align:center;
}
.b4 .ps ul {
	font-size:15px;
	padding-right:40px;
	-webkit-padding-start:0;
	list-style:none;
	line-height:22px;
	color:#444;
}
.b4 .ps ul li {
	padding-bottom:8px;
}
.b4 .ps ul li[nil="1"] {
	list-style:none;
}
.b4 .ps a{
	text-decoration: none;
	color:#444;
}
.b4 .ps a:hover{
	text-decoration: underline;
	color:#0070c8;
}
@media not screen and (min-width: 1000px) {
	.b4 .p3 {
		float:none;
		width:100%;
		padding-left:24px;
		padding-right:24px;
		margin:auto;
	}	
	.b4 .p3 ul li {
		padding-bottom:8px;
	}
}
.b4 p {
	padding:0px 0px 0px 0px;
	margin:12px 0px 0px 0px;
}
.b4 label {
	margin-left:4px;
	margin-top:4px;
}
.b4 input {
	display:block;
	margin-top:0px;
	margin-bottom:8px;
	border:0;
	border: 2px solid #fff;
	background:#ffffff;
	border-radius1:4px;
	font-size:17px;
	padding-left:8px;
	outline: none;  
	height:32px;
	width: 344px;
	margin-left:4px;
	color:#222;
}
.b4 input[req="1"] {
	border-color:#ff0000;
}
.b4 input:focus {
	border: 2px solid #0070c8;
	outline: none;
}
.b4 input[type="file"] {
	padding-top:6px;
	width: 600px;
	height:32px;
}
.b4 input[type="full"] {
	width:600px;
}
@media not screen and (min-width: 872px) {
	.b4 input[type="full"] {
		width:100%;
	}
}
@media not screen and (min-width: 400px) {
	.b4 input {
		width:100%;
	}
}
.b4 select {
	margin-bottom:2px;
	border: 2px solid #fff;
	padding-left:6px;
	font-size:16px;
	width: 600px;
	margin-left:4px;
	height:36px;
	color:#222;
	outline: none;  
}
.b4 select[req="1"] {
	border-color:#ff0000;
}
.b4 select[size="small"] {
	width:200px;
}
.b4 select[size="country"] {
	width:358px;
}
@media not screen and (min-width: 872px) {
	.b4 select {
		width:100%;
	}
}
.b4 textarea {
	border-radius1:4px;
	font-size:16px;
	outline:none;
	color:#222;
	border: 2px solid #fff;
	font-family:'Open Sans', sans-serif;
	padding-top:8px;
	padding-left:8px;
	margin-left:4px;
	height:44px;
	width:214px;
}
.b4 textarea[type="full"] {
	width:600px;
	height:80px;
}
@media not screen and (min-width: 872px) {
	.b4 textarea[type="full"] {
		width:100%;
	}
}
.b4 .ll {
	height:2px;
	display:block;
	background:#cccccc;
	margin-top:12px;
	margin-bottom:24px;
}
.b4 .lx {
	background:#06A5B1;
	height:100%;
	width:202px;
}
.b4 .button {
	border: 2px solid #0070c8;
	color:#ffffff;
	display:block;
	border-radius:0px;
	font-size:17px;
	padding-left:8px;
	margin-left:4px;
	margin-right:36px;
	height:28px;
	text-align:center;
	margin-top:8px;
	padding-top:8px;
	border-radius1:4px;
	background:#0070c8;
	outline: none;  
	width: 344px;
	height:28px;
	cursor:pointer;
}
.b4 .button:hover {
	box-shadow: 0 0 3px 1px #aaa;
}
@media not screen and (min-width: 1000px) {
	.b4 p {
		padding-left1:24px;
	}	
	.b4 .ll { 
		//margin-left:24px;
	}	
	.b4 .button { 
		//margin-left:24px;
	}	
}
@media not screen and (min-width: 400px) {
	.b4 .button {
		width:70%;
	}
}

.b4 .pb {
	color:#444;
	margin:auto;
	margin-top:24px;
	margin-bottom:8px;
	padding-left:32px;
	padding-right:24px;
	max-width:780px;
	background: #edede7;
	border-radius:8px;
	border:1px solid #dadacb;
	box-shadow: 0px 0px 8px 2px #eee;
}
@media not screen and (min-width: 850px) {
	.b4 .pb {
		border-radius:0px;
		padding-right:8px;
	}
}
@media not screen and (min-width: 600px) {
	.b4 .pb {
		padding-left:20px;
	}
}
@media not screen and (min-width: 440px) {
	.b4 .pb {
		margin-top:8px;
		background: #fff;
		color:#777;
	}
}

.b4 .pb[b="1"] {
	margin-top:-12px;
	background: #fff;
}
.b4 .pb[x="1"] {
	background: inherit;
	border:0;
	box-shadow: 0px 0px 0px 0px #fff;
}
.b4 .pb[w="1"] {
	background: #fff;
	border:1px solid #ddd;
}
.b4 .pb H3 {
	padding-left:12px;
}
.b4 .pb ul {
	font-size:15px;
	-webkit-padding-start:0px;
	padding-bottom:0px;
	list-style:none;
	line-height:22px;
	color:#777;
	margin-top:4px;
	margin-bottom:4px;
	padding:0px 12px 0px 4px;
}
.b4 .pb ul li {
	padding:6px 8px 6px 12px;
	border-bottom:1px solid #dadacb;
}
@media not screen and (min-width: 440px) {
	.b4 .pb ul li {
		border-bottom:2px solid #eee;
	}
}
.b4 .pb[x="1"] ul li {
	border-bottom:2px solid #eee;
}
.b4 .pb ul li:before {
  	content: "\2714";
	color:#0070c8;
	position: absolute;
	margin-left:-20px;
}
@media screen and (min-width: 872px) {
	.b4 .pb ul[dot="0"] {
  		text-align: center;
	}
	.b4 .pb ul[dot="0"] li:before {
  		content: "";
		margin-left:0px;
	}
}
.b4 .pb ul li:last-child {
	border-bottom:0px;
}

.b4 .x3 {
	float:left;
	padding:12px 1% 12px 1%;
	width:33%; 
	color:#444444;
	box-sizing: border-box;
}
.b4 .x3 .xf {
	padding-top:12px;
	overflow:hidden;
	border-radius:6px;
	background-color: #fff;
	border:2px solid #ccc;
}
.b4 .x3 a {
	text-decoration: none;
	color:#444444;
}
.b4 .x3 .xq {
	height:240px;
	margin-top:-54px;
	-webkit-transition: margin-left 0.2s; 
    transition: margin-left 0.2s;
}	
.b4 .x3[id="xhs"] .xq {
	background-image: url(img/profile1.png);
}
.b4 .x3[id="xrt"] .xq {
	background-image: url(img/provision1.png);
}
.b4 .x3[id="xdm"] .xq {
	background-image: url(img/demo1.png);
}
.b4 .x3 .xf:hover .xq { 
	margin-left:-12px;
	-webkit-transition: margin-left 0.2s; 
    transition: margin-left 0.2s;
}
.b4 .x3 H2 {
	text-align:center;
	z-index:1;
	position:relative;
	margin-top:8px;
	margin-bottom:12px;
}
.b4 .x3 .xu H4 {
	margin:0px 0px 0px 0px;
	padding:8px 16px 8px 16px;
	line-height:24px;
	position:relative;
	background:#eee;
	font-size:16px;
	color:#444;
	-webkit-transition: background-color 1s; 
    transition: background-color 1s;
}
.b4 .x3 .xu H4[type="HS"] {
	background:#06A5B1;
	color:#fff;
}
.b4 .x3 .xu H4[type="RT"] {
	background:#E94486;
	color:#fff;
}
.b4 .x3 .xu H4[type="XX"] {
	background:#4874A1;
	color:#fff;
}
.b4 .x3 .xu img {
	opacity:0.6;
	float:right;
	margin-right:40px;
	-webkit-transition: margin-left 0.4s; 
    transition: margin-left 0.4s;
}
.b4 .x3 .xf:hover1 .xu img { 
	margin-left:220px;
	-webkit-transition: margin-left 0.4s; 
    transition: margin-left 0.4s;
}
.b4 .x3 .xf:hover .xu H4 { 
	background:#06A5B1;
	background-color: rgba(0,0,0,0.7);
	color:#fff;
	-webkit-transition: background-color 1s; 
    transition: background-color 1s;
}
.b4 .x3 ul {
	font-size:17px;
	margin-bottom:0px;
	height:64px;
	background:#ccc;
	-webkit-padding-start:0;
	list-style:none;
	text-align:center;
	line-height:22px;
}
.b4 .c3 {
	float:left;
	width:22%; 
	color:#444444;
	padding-top:12px;
	background-repeat: no-repeat;	
	background-size:84px;
	background-position:center 25%;
	height:160px;
	border: 2px solid #aaa;
	margin:12px 12px 12px 12px;
	background-color:#fff;
}
.b4 .c3:hover { 
	opacity:1;
}
.b4 .c3 a {
	text-decoration: none;
	color:#444;
}
.b4 .c3 H2 {
	text-align:center;
	margin-top:112px;
	font-size:18px;
	color:#444;
}
@media not screen and (min-width: 1000px) {
	.b4 .x3 {
		float:none;
		width:100%;
		padding-left:16px;
		padding-right:16px;
	}	
	.b4 .x3 .xf {
		border-radius:0px;
		border-bottom:2px solid #444;
	}
	.b4 .x3 ul li {
		padding-bottom:8px;
	}
}
.b4 .cr {
	position:relative;
	left:240px;
	width:16px;
	height:16px;
	border: 2px solid #777;
	border-radius:50%;
}
.b4 .cr[sel="1"] {
	background:#777;	 
}
.b4 .next {
	font-size:24px;
	padding-top:8px;
	padding-bottom:8px;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(96,96,96,1) , rgba(255,255,255,0));
}
.b4 .next a {
	text-decoration: none;
	color:#fff;
}
.b4 .next a:hover {
	text-decoration: underline;
}
.b4 .next a:visited {
	color:#fff;
}
.b4 .next span {
	margin-left:8px;
}

/*
	ds
	----------------------------------------------------------------------
*/
.mgr-5-outer {
	height:460px;
	padding-top:8px;
	position:relative;
	margin-top:24px;
}
.mgr-5-outer[mgr="1"] {
	height:460px;
}
.mgr-5-outer[pda="1"] {
	height:380px;
}
.mgr-5-outer[pos="1"] {
	height:360px;
}
.mgr-5-outer img {
	border-radius1:8px;
	border1:2px solid #444;
	box-shadow: 0px 0px 8px 2px #777;
}
.mgr-5-a {
	position:absolute;
	margin-left:-80px;
	left:15%;
	z-Index:0;
	margin-top:35px;
}
.mgr-5-a img {
	width:160px;
}
.mgr-5-b {
	position:absolute;
	margin-left:-90px;
	left:31%;
	z-Index:1;
	margin-top:20px;
}
.mgr-5-b img {
	width:180px;
}
.mgr-5-c {
	position:absolute;
	margin-left:-100px;
	left:50%;
	z-Index:2;
}
.mgr-5-d {
	position:absolute;
	margin-left:-90px;
	left:69%;
	z-Index:1;
	margin-top:20px;
}
.mgr-5-d img {
	width:180px;
}
.mgr-5-e {
	position:absolute;
	margin-left:-80px;
	left:85%;
	z-Index:0;
	margin-top:35px;
}
.mgr-5-e img {
	width:160px;
}
.mgr-5-1 {
	position:absolute;
	margin-left:-80px;
	left:12%;
	z-Index:0;
}
.mgr-5-1 img {
	width:160px;
}
.mgr-5-2 {
	position:absolute;
	margin-left:-80px;
	left:31%;
	z-Index:1;
}
.mgr-5-2 img {
	width:160px;
}
.mgr-5-3 {
	position:absolute;
	margin-left:-80px;
	left:50%;
	z-Index:3;
}
.mgr-5-3 img {
	width:160px;
}
.mgr-5-4 {
	position:absolute;
	margin-left:-80px;
	left:69%;
	z-Index:1;
}
.mgr-5-4 img {
	width:160px;
}
.mgr-5-5 {
	position:absolute;
	margin-left:-80px;
	left:88%;
	z-Index:0;
}
.mgr-5-5 img {
	width:160px;
}

/*
	ds
	----------------------------------------------------------------------
*/
.ds-out {
	margin-left:64px;
	margin-right:64px;
}
@media not screen and (min-width: 1000px) {
	.ds-out {
		width:560px;
	}
}
@media not screen and (min-width: 700px) {
	.ds-out {
		width:280px;
	}
}
@media not screen and (min-width: 420px) {
	.ds-out {
		margin-left:0px;
		margin-right:0px;
	}
}
.ds-box {
	height:340px;
	width:100%;
	box-sizing: border-box;
	overflow:hidden;
}
.ds-box[type="mobile"] {
	height:500px;
}
.ds-scroll {
	transition: all 0.4s ease-in-out;
	white-space: nowrap;
}
.b4 .wr {
	float:right;
	color:#444;
	font-size:64px;
	margin-top:-210px;
	user-select: none;
	cursor:pointer;
	padding-right:8px;
	position: relative;
	z-index:2;
}
.b4 .wr[type="mobile"] {
	margin-top:-290px;
}
.b4 .wr[disabled="1"] {
	color:#ccc;
}
.b4 .wr:hover {
	color:#0070c8;
}
.b4 .wr[disabled="1"]:hover {
	color:#ccc;
}
.b4 .wl {
	float:left;
	color:#444;
	font-size:64px;
	margin-top:-210px;
	user-select: none;
	cursor:pointer;
	padding-left:8px;
	position: relative;
	z-index:2;
}
.b4 .wl[type="mobile"] {
	margin-top:-290px;
}
.b4 .wl[disabled="1"] {
	color:#ccc;
}
.b4 .wl:hover {
	color:#0070c8;
}
.b4 .wl[disabled="1"]:hover {
	color:#ccc;
}
.b4 .ds {
	display:inline-block;
	padding:12px 8px 12px 8px;
	width:280px; 
	box-sizing: border-box;
	color:#444444;
	box-sizing: border-box;
	white-space: normal;
}
.b4 .ds[vis="0"] {
	display:none;
}
.b4 .ds:hover {
	opacity:0.6;
}
.b4 .ds[type="mobile"]:hover {
	opacity:1;
}
.b4 .ds:hover[video="1"] {
	opacity:1;
}
.b4 .ds .xf {
	padding-top:12px;
	overflow:hidden;
	border-radius:4px;
	background-color: #fff;
	height:312px;
}
.b4 .ds a {
	text-decoration: none;
	color:#444444;
}
.b4 .ds H2 {
	text-align:center;
	z-index:1;
	position:relative;
	margin-top:12px;
	margin-bottom:12px;
	font-size:18px;
	font-weight:bold;
	text-shadow:0;
	color:#444;
}
.b4 .ds H3 {
	text-align:center;
	z-index:1;
	position:relative;
	margin-top:0px;
	margin-bottom:4px;
	font-size:15px;
}
.b4 .ds .xu H4 {
	margin:0px 0px 0px 0px;
	padding:8px 16px 8px 16px;
	line-height:24px;
	height:110px;
	position:relative;
	background:#eee;
	font-size:16px;
	color:#444;
	-webkit-transition: background-color 1s; 
    transition: background-color 1s;
}
.b4 .ds img {
	padding-top:0px;
	margin-bottom:8px;	
	height:167px;
}
.b4 .ds img[type="pos"] {
	height:163px;
	box-shadow: 0px 0px 4px 1px #777;
	border:2px solid #444;
	border-radius:4px;
}
.b4 .ds img[type="mob"] {
	height:163px;
	box-shadow: 0px 0px 4px 1px #777;
	border:2px solid #444;
	border-radius:4px;
}
.b4 .ds img[type="mobile"] {
	height:433px;
	border-radius:8px;
	border:2px solid #ccc;
	box-shadow: 0px 0px 8px 1px #444;
}
.b4 .ds video {
	padding-top:0px;
	margin-bottom:8px;
	height:163px;
	outline:none;
}

/*
	dr
	----------------------------------------------------------------------
*/
.dr-out {
	margin-left:64px;
	margin-right:64px;
}
@media not screen and (min-width: 1000px) {
	.dr-out {
		//width:560px;
	}
}
@media not screen and (min-width: 700px) {
	.dr-out {
		//width:280px;
	}
}
@media not screen and (min-width: 420px) {
	.dr-out {
		margin-left:0px;
		margin-right:0px;
	}
}
.dr-box {
	height:560px;
	width:100%;
	box-sizing: border-box;
	overflow:hidden;
}
.dr-scroll {
	transition: all 0.4s ease-in-out;
	white-space: nowrap;
}
.b4 .dr-wr {
	float:right;
	color:#444;
	font-size:64px;
	margin-top:-310px;
	user-select: none;
	cursor:pointer;
	padding-right:8px;
	position: relative;
	z-index:2;
}
.b4 .dr-wr[disabled="1"] {
	color:#ccc;
}
.b4 .dr-wr:hover {
	color:#0070c8;
}
.b4 .dr-wr[disabled="1"]:hover {
	color:#ccc;
}
.b4 .dr-wl {
	float:left;
	color:#444;
	font-size:64px;
	margin-top:-310px;
	user-select: none;
	cursor:pointer;
	padding-left:8px;
	position: relative;
	z-index:2;
}
.b4 .dr-wl[disabled="1"] {
	color:#ccc;
}
.b4 .dr-wl:hover {
	color:#0070c8;
}
.b4 .dr-wl[disabled="1"]:hover {
	color:#ccc;
}
.b4 .dr {
	display: inline-block;
	padding:12px 28px 12px 28px;
	width:840px; 
	box-sizing: border-box;
	color:#444444;
	box-sizing: border-box;
}

/*
	kk
	----------------------------------------------------------------------
*/
.kt {
	height: 200px; 
	overflow: hidden;
	margin-top:-200px; 
	width:100%;
}
@media not screen and (min-width: 600px) {
	.kt {
		height: 120px; 
		margin-top:-120px; 
	}
}

.kb {
	height: 150px; 
	overflow: hidden;
}
@media not screen and (min-width: 600px) {
	.kb {
		height: 60px; 
	}
}

/*
	sv
	----------------------------------------------------------------------
*/
.vt {
	height: 200px; 
	overflow: hidden;
	margin-top:-100px; 
	width:100%;
}
@media not screen and (min-width: 600px) {
	.vt {
		height: 100px; 
		margin-top:-40px; 
	}
}

.vb {
	height: 150px; 
	overflow: hidden;
}
@media not screen and (min-width: 600px) {
	.vb {
		height: 60px; 
	}
}

/*
	ax
	----------------------------------------------------------------------
*/
.ax-o {
	height:449px;
	width:100%;
}
.ax-f {
	top:60px;
	width:100%;
	padding-top:8px;
	padding-bottom:8px;
	background1:#fff;
}
.ax-f[fix="1"] {
	position:fixed;
}
.ax-f[fix="0"] {
	position:inherit;
}
.ax-i {
	width:200px;
	margin-left:-400px;
	top:32px;
	height:433px;
	position: relative;
	border:1px solid #777;
	box-shadow: 0px 0px 8px 1px #444;
}
.ax-i img {
	width:200px;
	position:absolute;
	top:0;
	left:0;
	-webkit-transition: opacity 0.4s ease-in-out;
  	-moz-transition: opacity 0.4s ease-in-out;
  	-o-transition: opacity 0.4s ease-in-out;
  	transition: opacity 0.4s ease-in-out;
}
.ax-i img[vis="1"] {
	opacity:1;
}
.ax-i img[vis="0"] {
	opacity:0;
}
.ax-l {
	float:left;
	width:50%;
}
.ax-r {
	float:right;
	width:50%;
	padding-right:8px;
}
.ax-r li {
	list-style: none;
	max-width:540px;
	opacity:0.4;
}
.ax-r li[bul="1"] {
	min-height:200px;
	padding-bottom:48px;
}
.ax-r li[act="1"] {
	opacity:1;
}
.ax-r li H3 {
	font-size:28px;
	padding-bottom:16px;
}
.ax-r li H3 {
	font-size:28px;
	padding-bottom:16px;
}
.ax-r li span {
	font-size:17px;
	line-height:22px;
	font-weight:bold;
	color:#444;
}
.ax-r ul {
	list-style:none;
	margin:0;
	padding:0;
	padding-top:8px;
	//padding-left:20px;
}
.ax-r ul li {
	list-style:none;
	line-height:22px;
	font-size:15px;
	padding-left:20px;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:1px solid #eee;
	line-height:22px;
	color:#777;
	opacity:1;
}
.ax-r ul li:before {
  	content: "\2714";
	position: absolute;
	margin-left:-20px;
}

/*
	dm
	----------------------------------------------------------------------
*/
.dm1 .dp {
	float:left;
	width:32px;
	height:32px;
	font-size:32px;
	font-weight:normal;
	margin-left:12px;
	margin-right:12px;
	margin-top:-2px;
	color:#06A5B1;
	overflow:hidden;
}
.dm1 img {
	width:64px;
	-webkit-transition: margin-left 0.2s; 
    transition: margin-left 0.2s;
}
.dm1[vis="0"] img {
	margin-left:0px;
}
.dm1[vis="1"] img {
	margin-left:-35px;
}
.dm1 a {
	text-decoration: none;
}
.dm1 ul{
	margin-top:0px;
	width:100%;
}
.dm1 .ll {
	height:4px;
}
.dm1 ul{
}
.dm1[vis="0"] ul{
	display:none;
}
.dm1[vis="1"] ul{
	display:inline-block;
}
.dm1[vis="1"] .ll {
	background:#06A5B1;
	-webkit-transition: background 1s; 
    transition: background 1s;
}

/*
	b6
	----------------------------------------------------------------------
*/
.y0 {
	clear:both;
	float:left;
	width:32%; 
	color:#444;
}
.y0 div{
	display:block;
	padding-left:12px;
	height:28px;
	padding-top:12px;
	border-bottom:1px solid #ccc;
}
.y0 .title{
	border-bottom:2px solid #fff;
}
.y0 .attrs{
//	height:42px;
	background:#fff;
}
.y0 .detail{
	background:#fff;
}
.y0 .basic{
	background:#fff;
	white-space: nowrap;
	overflow: hidden;
  	text-overflow: ellipsis;
}
.y0 .header{
	background:#eee;
	font-weight:bold;
	white-space: nowrap;
	overflow: hidden;
  	text-overflow: ellipsis;
}
.y0 a{
	text-decoration: none;
	color:#444;
}
.y0 a:visited{
	text-decoration: none;
	color:#444;
}
.y0 a:hover{
	text-decoration: underline;
	color:#0070c8;
}
.y0 a:hover .basic{
	background: #eee;
}
.y0 .price{
	background:#fff;
	white-space: nowrap;
	overflow: hidden;
  	text-overflow: ellipsis;
}
.y3 {
	float:left;
	width:20%; 
	color:#444444;
}
.y3 div{
	display:block;
	padding-top:12px;
	height:28px;
	border-left:4px solid #eee;
	border-bottom:1px solid #ccc;
	text-align:center;
}
.y3 a{
	text-decoration: none;
	color:#444;
}
.y3 .link {
	border-bottom:2px solid #eee;
}
.y3 .link[sel="1"] {
	background:#0070c8;
	color:#fff;
}
.y3 .title{
	border-bottom:1px solid #ccc;
}
.y3 .attrs{
	height:42px;
	background:#eee;
	text-align:center;
}
.y3 .basic{
	background:#fff;
	text-align:right;
	text-align:center;
}
.y3 .price{
	background:#fff;
	text-align:right;
	text-align:center;
	color:#2378d6;
}
.y3 .price img{
	margin-top:-4px;
	width:24px;
}

.yy {
	overflow-x: scroll;
	//border-top:12px solid #eee;
}
.yy .matrix {
	min-width:600px;
}

.y4 {
	float:left;
	width:16%; 
	color:#444444;
}
.y4 div {
	display:block;
	padding-top:12px;
	height:28px;
	border-left:4px solid #eee;
	border-bottom:1px solid #ccc;
	text-align:center;
}
.y4 a{
	text-decoration: none;
}
.y4 .link {
	height:25px;
	border:2px solid #777;
	color:#444;
}
.y4 .link[sel="1"] {
	background:#0070c8;
	color:#fff;
}
.y4 .title{
	border-bottom:1px solid #ccc;
}
.y4 .attrs{
	background:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
.y4 .detail{
	font-size:12px;
	background:#fff;
}
.y4 .basic{
	background:#fff;
	text-align:right;
	text-align:center;
}
.y4 .header{
	background:#eee;
}
.y4 .price{
	background:#fff;
	text-align:right;
	text-align:center;
	color:#2378d6;
}
.y4 .price[na="1"]{
	font-size:26px;
	line-height:14px;
}
.y4 .price img{
	margin-top:-4px;
	width:24px;
}

.yf {
	float:left;
	width:64%; 
	color:#444444;
}
.yf div{
	display:block;
	padding-top:12px;
	height:28px;
	border-left:4px solid #eee;
	border-bottom:1px solid #eee;
	text-align:left;
}


.trapezoid {
	display:none;
  width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-left: 200px solid #ccc;
      border-bottom: 100px solid transparent;
opacity:0.15;

		position:absolute;
	margin:auto;
margin-top:-100px;
left:0;
right:0;
    }

.dot {
	width: 124px;
      height: 14px;
      background: #ccc;
		opacity:0.4;
      border-radius: 16px;
position1:absolute;
	margin:auto;
margin-top:14px;
margin-bottom:-8px;
left:0;
right:0;
    }

  
/*
	b6
	----------------------------------------------------------------------
*/
.b6 {
	overflow:hidden;
}
.b6 img {
	width:100%;
	height:100%;
	min-width:800px;
	display: block;
}
.b6 .pl {
	margin:auto;
	max-width:970px;
	position:relative;
	background:#800000;	 
	top:-50%;
}
.b6 .pl H2 {
	padding:0px 36px 0px 0px;
	margin:0;
}
.b6 .pl H3 {
	padding:0px 36px 0px 0px;
	margin:0;
}
.b6 .pl .text {
	padding:20px 36px 0px 0px;
	padding-top:20px;
	font-size:17px;
	margin:0;
}

.b7 {
	clear:both;
	overflow:hidden;
	padding-top:32px;
	padding-bottom:32px;
	background:#ffffff;
	border-top: 2px solid #eeeeee;
}
.b7 img {
	float:left;
}
@media not screen and (min-width: 1000px) {
	.b7 img {
		padding-left:24px;
	}
}
.b7 span {
	float:left;
	color:#777777;
	font-size:20px;
	padding-left:24px;
	padding-top:24px;
}
.b7 input {
	float:left;
	margin-left:24px;
	margin-top:48px;
}

/*
	rep
	----------------------------------------------------------------------
*/
.rpb {
	height:560px;
}
@media not screen and (min-width: 640px) {
	.rpb {
		height:520px;
	}
}
@media not screen and (min-width: 600px) {
	.rpb {
		height:490px;
	}
}
@media not screen and (min-width: 560px) {
	.rpb {
		height:464px;
	}
}
@media not screen and (min-width: 520px) {
	.rpb {
		height:438px;
	}
}
@media not screen and (min-width: 480px) {
	.rpb {
		height:412px;
	}
}
@media not screen and (min-width: 440px) {
	.rpb {
		height:386px;
	}
}
@media not screen and (min-width: 400px) {
	.rpb {
		height:360px;
	}
}
@media not screen and (min-width: 360px) {
	.rpb {
		height:334px;
	}
}
.rpx {
	position:absolute;
	left:0;
	right:0;
	margin:auto 0;
}
.rpx img {
	max-width:640px;
	box-sizing: border-box;
}
@media not screen and (min-width: 872px) {
	.rpx img {
		width:100%;
	}
}
.b5 .ws {
	position:relative;
	display:inline-block;
	width:24px;
	height:24px;
	margin:0px 4px 0px 4px;
	border: 2px solid #444;
	border-radius:50%;
	top:194px;
}
.b5 .ws[sel="1"] {
	background:#0070c8;	 
}
.b5 .ws:hover {
	background:#ccc;	 
}

.b5 .wr {
	float:right;
	color:#fff;
	font-size:72px;
}
.b5 .wr:hover {
	opacity:0.6;
}
@media not screen and (min-width: 872px) {
	.b5 .wr { 
		display:none;
	}
}
.b5 .wl {
	float:left;
	color:#fff;
	font-size:72px;
}
.b5 .wl:hover {
	opacity:0.6;
}
@media not screen and (min-width: 872px) {
	.b5 .wl { 
		display:none;
	}
}

/*
	locale
	----------------------------------------------------------------------
*/
.locale select {
	border: 2px solid #fff;
	padding-left:4px;
	font-size:16px;
	width: 220px;
	height:32px;
	color:#222;
	outline: none;  
	margin-bottom:8px;
}

/*
	bts
	----------------------------------------------------------------------
*/
.bts {
	color:#555;
	line-height:20px;
}
@media not screen and (min-width: 872px) {
	.bts {
		padding-left:24px;
		padding-right:24px;
		padding-bottom:24px;
	}
}
.bts .circle {
  	float: left;
  	height: 320px;
  	width: 320px;
  	shape-outside: circle();
  	clip-path: circle();
  	background: url(img/logof.png);
	background-size: 280px;
	background-repeat: no-repeat;
	background-position: 10px 36px
}
@media not screen and (min-width: 872px) {
	.bts .circle {
		display:none;
	}
}
.bts p {
	padding:0;
	margin:0px 0px 8px 0px;
	line-height:34px;
}
@media not screen and (min-width: 872px) {
	.bts p {
		margin-bottom:8px;
	}
}
.bts .sep {
	height:1px;
	background:#fff;	
}
@media not screen and (min-width: 872px) {
	.bts .sep {
		background:#eee;
	}
}

/*
	legal
	----------------------------------------------------------------------
*/
.legal {
	max-width:732px;
	text-align:left;
	padding-left:16px;
	padding-right:16px;
	font-family: Courier New, Tahoma, Arial, sans-serif;
}
.legal H2 {
	font-size:34px;
	color:#444;
	margin-top:0px;
	padding-bottom:12px;
}
.legal H3 {
	font-size:28px;
	color:#444;
	padding-bottom:12px;
}
.legal H4 {
	font-size:26px;
	color:#222;
	padding-bottom:14px;
	padding-left:0px;
	padding-top:24px;
}
.legal p {
	font-size:16px;
	line-height:24px;
	color:#444;
	padding-bottom:12px;
}

/*
	blog
	----------------------------------------------------------------------
*/
.blog {
	max-width:732px;
	text-align:left;
	padding-left:20px;
	padding-right:16px;
	font-family: Arial, sans-serif;
	border-left:12px solid #eee;
	border-right:12px solid #eee;
}
.blog .when {
	text-align:left;
	padding-bottom:24px;
	padding-left:2px;
	font-family: Courier New, Tahoma, Arial, sans-serif;
	font-size:12px;
	font-weight:bold;
}
.blog H2 {
	font-size:34px;
	color:#444;
	margin-top:0px;
	padding-bottom:12px;
}
.blog H3 {
	font-size:28px;
	color:#444;
	padding-bottom:12px;
}
.blog H4 {
	font-size:26px;
	color:#222;
	padding-bottom:14px;
	padding-left:0px;
	padding-top:48px;
	border-bottom:4px dotted #ccc;
}
.blog li {
	font-size:16px;
	line-height:24px;
	color:#444;
	padding-top:6px;
	padding-bottom:6px;
	padding-left:24px;
	padding-right:32px;
}
.blog p {
	font-size:16px;
	line-height:24px;
	color:#444;
	padding-bottom:4px;
}
.blog .sep {
	display:none;
	border-radius:50%;
	width:16px;
	height:16px;
	background:#ddd;
	margin:auto;
	margin-top:32px;
}
.blog .left {
	text-align:left;
	padding-right:300px;
	margin-top1:-200px;
	//width:300px;
}

/*
	sitemap
	----------------------------------------------------------------------
*/
.sitemap {
	width:800px;
	text-align:left;
}
.sitemap a {
	color:#444;
	text-decoration: none;
}
.sitemap a:visited {
	color:#444;
	text-decoration: none;
}
.sitemap a:hover {
	text-decoration: underline;
}
.sitemap H2 {
	font-size:36px;
	color:#444;
	padding-top:12px;
	padding-bottom:0px;
	border-top:2px solid #444;
}
.sitemap H3 {
	font-size:28px;
	color:#444;
	padding-bottom:4px;
}
.sitemap p {
	font-size:15px;
	line-height:20px;
	color:#444;
	padding-left:40px;
	padding-bottom:6px;
}

/*
	f1
	----------------------------------------------------------------------
*/
.f1 {
	overflow:hidden;
	background:#47504d;
	background:#444;
	padding:12px 0px 12px 16px;
	font-size:14px;
	color:#ffffff;
}
.f1 .fr {
	padding-top:12px;
}
.f1 .fr img{
	margin-left:-4px;
}
.f1 a {
	color:#ffffff;
}
.rx {
}
@media not screen and (min-width: 1000px) {
	.rx {
		max-width:640px;
		margin:auto;
	}
}
.f1 .pf {
	float:right;
	width:40%; 
	box-sizing: border-box;
}
.f1 .pf span{
	font-weight:bold;
}
@media not screen and (min-width: 1000px) {
	.f1 .pf {
		clear:both;
		float:none;
		width:100%;
		margin:auto;
	}	
}
.f1 .p5 {
	float:left;
	max-width:218px;
	width:20%; 
}
@media not screen and (min-width: 1000px) {
	.f1 .p5 {
		width:30%;
	}	
}
@media not screen and (min-width: 600px) {
	.f1 .p5 {
		min-width:180px;
	}	
}
.f1 ul {
	font-size:14px;
	padding-right:0px;
	padding-left:0px;
	-webkit-padding-start: 0;
	list-style:none;
	color:#777;
}
.f1 ul li {
	padding-top:7px;
}
.f1 ul li span{
	font-weight:bold;
}
.f1 ul a {
	font-size:14px;
	text-decoration: none;
}
.f1 ul a:hover { 
	text-decoration: underline;
}
.facebook {
  	font-size: 44px;
  	width: 22px;
	height: 20px;	
	padding-top:6px;
	padding-left:4px;
	line-height: 30px;	
	font-weight1:bold;
  	text-align: center;
	border-radius:8px;
  	text-decoration: none;
  	margin: 5px 2px;
	background: #ccc;
  	color: #444;
}
.f1 ul li[b="1"] a:hover {
	text-decoration: none;
}
.f1 ul li[b="1"] a:hover .facebook {
	background: #fff;
}

/*
	f2
	----------------------------------------------------------------------
*/
.f2 {
	overflow:hidden;
	padding:0px 24px 12px 16px;
	background:#47504d;
	background:#444;
	color: #777;
	font-size:14px;
}
.f2 .fr {
	padding-bottom:24px;
}
.f2 .fr[sep="1"]{
	border-top: 1px solid #777;
	padding-top:18px;
}
.f2 span {
	float:left;
	color:#fff;
}
.f2 a {
	float:left;
	color:#fff;
	text-decoration: none;
}
.f2 a:hover { 
	text-decoration: underline;
}
.f2 .fq {
	padding-left:12px;
}
@media not screen and (min-width: 640px) {
	.f2 .fq {
		padding-left:0px;
	}
}	
.f2 .fq .cp {
	color:#ccc;
}
@media not screen and (min-width: 440px) {
	.f2 .fq .cp {
		float:right;
	}
}
@media not screen and (min-width: 440px) {
	.f2 .fq .nk {
		width:400px;
		padding-top:8px;
	}
}
.f2 .fq .br {
	float:left;
	color:#ccc;
}
@media not screen and (min-width: 440px) {
	.f2 .fq .br {
		display:none;
	}
}

.up {
	width:33%;
	float:left;
}
.up .dis {
	width:100%;
	font-size:64px;
	color:#444;
	text-align:center;
}
@media not screen and (min-width: 600px) {
	.up .dis {
		font-size:44px;
	}
}
.up .sep {
	margin-top:6px;
	background:#ccc;
	height:1px;
	width:32px;
}
.up .txt {
	margin-top:10px;
	font-size:16px;
	color:#777;
	white-space: nowrap;
}
@media not screen and (min-width: 400px) {
	.up .txt {
		font-size:14px;
	}
}

/*
	404
	----------------------------------------------------------------------
*/

.mes {
	text-align:left;
	margin-left:30px;
	margin-top:20px;
	display:block;
	font-size: 160px;
	color:#fa5838;
    font-weight: 900;
    text-shadow: 4px 4px 0 #fff, 6px 6px 0 #343a40;
    line-height: 210px;"
}

.txt {
	text-align:left;
	margin-left:30px;
	margin-right:30px;
	display:block;
	font-size: 28px;
	font-weight:b1old;
	color:#444;
	text-shadow: 1px 1px 0 #fff, 0px 0px 0 #fff;
	margin-bottom:40px;
}

/*
	jobs
	----------------------------------------------------------------------
*/

.jobs-search {
	margin-top: 16px;
	margin-bottom: 16px;
}

.jobs-search select {
	border: 4px solid #dddddd;
	margin: 4px 4px 4px 4px;
	padding: 1px 6px 1px 6px;
	border-radius: 24px;
	font-size:16px;
	width: 600px;
	height:46px;
}

/* edit */
.edit-panel {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 02px;
	padding-left: 8px;
	padding-right: 8px;
	background:#fff;
	width: 340px;
	vertical-align: top;
}

.edit-field {
	position: relative;
	display: block;
	float: left;
	padding-top: 6px;
	padding-bottom: 0px;
	padding-left: 1px;
	font-size:18px;
	width: 60%;
	border: none;
	border-radius: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	z-index: 10;
	width: 100%;
	background: transparent;
	color: #444;
}
.edit-field:focus {
	outline: none;
}

.edit-label {
	display: inline-block;
	float: right;
	width: 40%;
	color: #6a7989;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	overflow: hidden;
	padding: 0;
	width: 100%;
	color: #777;
	text-align: left;
}

.edit-label::before {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	-webkit-transform: scale3d(1, 0.4, 1);
	transform: scale3d(1, 0.4, 1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
	transition: transform 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.edit-label::after {
	content: attr(data-content);
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px 1px;
	color: #da7071;
	opacity: 0;
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	pointer-events: none;
}
.edit-field:focus + .edit-label::before {
	background-color: #da7071;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.edit-field:focus + .edit-label {
	pointer-events: none;
}

.edit-field:focus + .edit-label::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.edit-descr {
	position: relative;
	display: block;
	padding: 16px 0;
	width: 100%;
	padding: 4px 1px;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.edit-field:focus + .edit-label .edit-descr {
	opacity: 0;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}

/*
	hist
	----------------------------------------------------------------------
*/
.hist-cont {
	width:280px;
}

.hist-up {
	margin-left:2px;
  	width: 0; 
  	height: 0; 
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-bottom: 10px solid #444;
}

.hist-line {
	left:50%;
	margin-left:-1px;
	width:2px;
	position:absolute;
	height:1540px;
	background:#444;
	z-index:-1;
}

.hist-xbox {
	width:260px;
	height:44px;
	background:#06A5B1;
	margin: 8px 8px 8px 8px; 
	padding: 8px 8px 8px 8px; 
	color:#fff;
	font-size:16px;
	font-weight:bold;
	border-radius:6px;
}
.hist-xbox[pos="r"] {
	margin-left:200px;
}
.hist-xbox[pos="l"] {
	margin-left:-380px;
}
@media not screen and (min-width: 700px) {
	.hist-xbox[pos="r"] {
		margin-left:0px;
	}
	.hist-xbox[pos="l"] {
		margin-left:0px;
	}
}

.hist-xbox span {
	line-height: 24px;
	text-align:center;
}
@media not screen and (min-width: 700px) {
	.hist-xbox span {
	line-height: 44px;
	}
}

@media not screen and (min-width: 700px) {
	.hist-horz {
		display:none;
	}
	.hist-conn {
		display:none;
	}
}

.hist-xbox[pos="r"] .hist-horz {
	left:-148px;
	top:12px;
	height:2px;
	width:100px;
	position:relative;
	background:#444;
	z-index:-1;
	overflow:hidden;
}
.hist-xbox[pos="r"] .hist-conn {
	left:-198px;
	top:17px;
	height:8px;
	width:8px;
	position:relative;
	background:#444;
	overflow:hidden;
	border-radius:50%;
}

.hist-xbox[pos="l"] .hist-horz {
	left:144px;
	top:12px;
	height:2px;
	width:100px;
	position:relative;
	background:#444;
	z-index:-1;
	overflow:hidden;
}
.hist-xbox[pos="l"] .hist-conn {
	left:194px;
	top:17px;
	height:8px;
	width:8px;
	position:relative;
	background:#444;
	overflow:hidden;
	border-radius:50%;
}

.hist-year {
	border-radius:50%;
	background:#E94486;
	width:64px;
	height:64px;
	line-height: 64px;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	margin-top:36px;
	margin-bottom:36px;
}


/*
	paper
	----------------------------------------------------------------------
*/

.paper {
  background: #fff;
  padding-top: 40px;
  position: relative;
}

.paper,
.paper::before,
.paper::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.paper::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.paper::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}

/*
	cube
	----------------------------------------------------------------------
*/

.cube-container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 70px auto 40px;
  -webkit-perspective: 2000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px );
     -moz-transform: translateZ( -100px );
       -o-transform: translateZ( -100px );
          transform: translateZ( -100px );
}

#cube.spinning {
  -webkit-animation: spinCubeWebkit 6s infinite  linear;
     -moz-animation: spinCubeMoz    6s infinite  linear;
       -o-animation: spinCubeO      6s infinite;
          animation: spinCube       6s infinite;
}

@-webkit-keyframes spinCubeWebkit {
    0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

@-moz-keyframes spinCubeMoz {
    0% { -moz-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -moz-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

@keyframes spinCube {
    0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

#cube .figure {
  display: block;
  position: absolute;
  width: 196px;
  height: 196px;
  border: 2px solid black;
  line-height: 196px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  background: black;
  opacity: 1;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

#cube .front  {
  -webkit-transform: translateZ( 100px );
     -moz-transform: translateZ( 100px );
       -o-transform: translateZ( 100px );
          transform: translateZ( 100px );
}
#cube .back {
  -webkit-transform: rotateX( -180deg ) translateZ( 100px );
     -moz-transform: rotateX( -180deg ) translateZ( 100px );
       -o-transform: rotateX( -180deg ) translateZ( 100px );
          transform: rotateX( -180deg ) translateZ( 100px );
}
#cube .right {
  -webkit-transform: rotateY(   90deg ) translateZ( 100px );
     -moz-transform: rotateY(   90deg ) translateZ( 100px );
       -o-transform: rotateY(   90deg ) translateZ( 100px );
          transform: rotateY(   90deg ) translateZ( 100px );
}
#cube .left {
  -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
     -moz-transform: rotateY(  -90deg ) translateZ( 100px );
       -o-transform: rotateY(  -90deg ) translateZ( 100px );
          transform: rotateY(  -90deg ) translateZ( 100px );
}
#cube .top {
  -webkit-transform: rotateX(   90deg ) translateZ( 100px );
     -moz-transform: rotateX(   90deg ) translateZ( 100px );
       -o-transform: rotateX(   90deg ) translateZ( 100px );
          transform: rotateX(   90deg ) translateZ( 100px );
}
#cube .bottom {
  -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
     -moz-transform: rotateX(  -90deg ) translateZ( 100px );
       -o-transform: rotateX(  -90deg ) translateZ( 100px );
          transform: rotateX(  -90deg ) translateZ( 100px );
}

.rubik_cube_face {
    text-align: center;  
    width:200px;
    height:200px;   
}
.rubik_cube_face span {
    display: inline-block;
    border:1px solid black;
    float:left;
    vertical-align: middle;
    width: 28%;
    height: 28%;
    margin: 2% 2%;
    background: black;
    border-radius: 3px;
    -webkit-animation: animateRubik 1s infinite alternate;
}

.front .rubik_cube_face span
{
     -webkit-animation: animateRubikFront 1s infinite alternate;
}

.back .rubik_cube_face span
{
     -webkit-animation: animateRubikBack 1s infinite alternate;
}

.right .rubik_cube_face span
{
     -webkit-animation: animateRubikRight 1s infinite alternate;
}

.left .rubik_cube_face span
{
     -webkit-animation: animateRubikLeft 1s infinite alternate;
}

.top .rubik_cube_face span
{
     -webkit-animation: animateRubikTop 1s infinite alternate;
}

.bottom .rubik_cube_face span
{
     -webkit-animation: animateRubikBottom 1s infinite alternate;
}

.front .rubik_cube_face span
{
     background: #06A5B1;
}
.back .rubik_cube_face span
{
     background: #E94486;
}
.right .rubik_cube_face span
{
     background: #06A5B1;
}
.left .rubik_cube_face span
{
     background: #E94486;
}
.top .rubik_cube_face span
{
     background: white;
}
.bottom .rubik_cube_face span
{
     background: #444;
}

.rubik_cube_face span:nth-of-type(1) {
    -webkit-animation-delay: 0s;
    background: #E94486;
}
.rubik_cube_face span:nth-of-type(2) {
    -webkit-animation-delay: .1s;
    background: #06A5B1;
}
.rubik_cube_face span:nth-of-type(3) {
    -webkit-animation-delay: .2s;
    background: white;
}
.rubik_cube_face span:nth-of-type(4) {
    -webkit-animation-delay: .3s;
    background: #E94486;
}
.rubik_cube_face span:nth-of-type(6) {
    -webkit-animation-delay: .4s;
    background: #E94486;
}
.rubik_cube_face span:nth-of-type(7) {
    -webkit-animation-delay: 1s;
    background: #444;
}
.rubik_cube_face span:nth-of-type(8) {
    -webkit-animation-delay: 1.2s;
    background: #E94486;
}
.rubik_cube_face span:nth-of-type(9) {
    -webkit-animation-delay: 1.4s;
    background: #06A5B1;
}
@-webkit-keyframes animateRubik {
  0% {
  }
  20% {
    background: #06A5B1;
  }
}
@-webkit-keyframes animateRubikFront {
  0% {
  }
  50% {
    background: #06A5B1;
  }
}
@-webkit-keyframes animateRubikBack {
  0% {
  }
  50% {
    background: #E94486;
  }
}
@-webkit-keyframes animateRubikRight {
  0% {
  }
  50% {
    background: #06A5B1;
  }
}
@-webkit-keyframes animateRubikLeft {
  0% {
  }
  50% {
    background: #E94486;
  }
}
@-webkit-keyframes animateRubikTop {
  0% {
  }
  50% {
    background: white;
  }
}
@-webkit-keyframes animateRubikBottom {
  0% {
  }
  50% {
    background: #444;
  }
}