.container {
	min-width: 1410px;
	overflow: hidden;
}
.wrap {
	width: 1410px;
	margin: 0 auto;
}
.content {
	padding: 170px 0 0;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}





header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition:all .5s;
}
header.shadow {
	background: #1f2226;
	background: #1f2226cc;
}
header.light, .inner header {
	background: #fff;
	background: #fffe;
}
header.light #menu-button, .inner header #menu-button {
	border-color: #000;
}
header.light #menu-button i, .inner header #menu-button i {
	background: #000;
}
header .wrap {
	height: 140px;
	padding: 50px 0 0;
	font-weight: 700;
	line-height: 2;
}
header, header a {
	color: #fff;
}
header.light, header.light a, .inner header a {
	color: #000;
}
.logo {
	display: block;
	width: 160px;
	height: 30px;
	background: url(../i/logo.png);
	position: absolute;
	top: 52px;
	left: 50%;
	margin: 0 0 0 -910px;
}
.light .logo, .inner header .logo {
	background-position: 0 -30px;
}
#menu {
	text-align: center;
}
#menu li {
	display: inline-block;
	vertical-align: middle;
	margin: 0 60px;
}
#menu li a {
	display: block;
	border-bottom: 1px solid #fc0;
}
.light #menu li a, .inner header #menu li a {
	border-color: #e5e5e5;
}
#phones {
	float: right;
	margin: -32px 0 0;
}
#request {
	display: block;
	line-height: 38px;
	font-weight: 400;
	padding: 0 30px;
	border: 1px solid #fc0;
	border-radius: 3px;
	position: absolute;
	top: 47px;
	right: 50%;
	margin: 0 -920px 0 0;
}
.light #request, .inner header #request {
	border-color: #e5e5e5;
}
#request:hover {
	background: #fc02;
}
.light #request:hover, .inner header #request:hover {
	background: #e5e5e5;
}





.block {
	width: 100%;
	padding: 60px 0 0;
	position: relative;
}


#block1 {
	background: url(../i/block1.jpg) no-repeat 50% 50% / cover;
	height: 100%;
	overflow: hidden;
}
#block2 {
/*	background: url(../i/block2.jpg) no-repeat 50% 50% / cover;
	height: 100%;*/
	position: relative;
	overflow: hidden;
}
#block3 {
	background: #1f2226;
	padding: 0;
}
#block4 {
	background: #fff;
}
#block5 {
	background: #fff;
}
#block1, #block3, #block1 a, #block3 a {
	color: #fff;
}


.block > i.next {
	display: block;
	width: 37px;
	height: 16px;
	background: url(../i/next.png);
	position: absolute;
	bottom: 60px;
	left: 50%;
	margin: 0 0 0 -18px;
	opacity: .2;
	cursor: pointer;
	transition:all .5s ease 0s;
	z-index: 50;
}
#block4 > i.next {
	background-position: 0 -16px;
}
.block > i.next:hover {
	opacity: 1;
}



#block1 video {
	width: 1920px;
	height: 1080px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#block1:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../i/v.png);
	z-index: 28;
}
#block1 .wrap {
	padding: 20vh 0 0;
	position: relative;
	z-index: 30;
}
#block1 .wrap h1 {
	width: 90%;
	font-size: 68px;
	text-align: center;
	margin: 0 0 12vh;
}
#il {
	font-size: 0;
	display: none;
}
#il li {
	display: inline-block;
	vertical-align: middle;
	width: 25%;
	text-align: center;
	position: relative;
}
#il li a:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #fc03;
	border-radius: 10px;
	background: #1f2226;
	background: #ffcc0009;
	transition:all .5s;
	transform: rotate(-90deg) scale(0);
}
#il li a:hover:before {
	transform: none;
}
#il li a {
	display: block;
	padding: 20px;
}
#il li a img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 25px 0 0;
}
#il li a span {
	display: inline-block;
	vertical-align: middle;
	font-size: 20px;
	line-height: 2;
	font-weight: 700;
	border-bottom: 1px dotted #fc0;
}


#block2 {
	text-align: center;
	padding: 60px 0 100px;
}
#block2 h2 {
	font-size: 30px;
}
#block2 p {
	margin: 2em 0;
	color: #666;
}
#block2 h2+p {
	margin: 0 0 3em;
}
#services {
	height: 100vh;
	text-align: center;
	overflow: hidden;
	padding: 20vh 0 0;
	margin: -60px auto 0;
	position: relative;
	z-index: 15;
}
#services > * {
	position: relative;
	z-index: 20;
}
#services h2 {
	font-size: 50px;
	margin: 0 0 15vh;
}
#services ul {
	width: 1000%;
	font-size: 0;
	text-align: left;
	margin: 0 0 70px;
	position: relative;
	transition:all 1s;
}
#services ul li {
	display: inline-block;
	vertical-align: top;
	margin: 0 30px 0 0;
}
#services ul li.hover {
	background: #0005;
}
#services ul li a {
	display: block;
	width: 330px;
	padding: 10px 0 20px;
	text-align: center;
	position: relative;
}
#services ul li a * {
	position: relative;
}
#services ul li a > i {
	display: block;
	height: 60px;
	line-height: 60px;
}
#services ul li a > i img {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}
#services ul li a > span {
	display: inline-block;
	font-size: 20px;
	line-height: 2;
}
#services ul li a > em {
	display: none;
}
#services ul li a > span:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #fc0;
	position: absolute;
	bottom: 0;
	left: 0;
}
#services section {
	margin: 0 0 80px;
}
#services section a {
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	border-radius: 100%;
	margin: 0 4px;
	cursor: pointer;
}
#services section a:hover {
	box-shadow: 0 0 10px #fff;
}
#services section a.active {
	background: #fc0;
	border-color: #fc0;
}
#services > a {
/*	display: inline-block;*/
	line-height: 48px;
	padding: 0 45px;
	border: 1px solid #fff;
	border: 1px solid #fff6;
	border-radius: 3px;
	opacity: .3;
	display: none;
}
#services > a:hover {
	opacity: 1;
	background: #fff1;
}
#services > figure {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 18;
}
#services > figure img {
	width: 330px;
	height: 1080px;
	position: absolute;
	top: 0;
	transition:all .5s;
	opacity: 0;
}
#services > figure img:nth-child(4n) {
	left: 1080px;
}
#services > figure img:nth-child(4n+1) {
	left: 0;
}
#services > figure img:nth-child(4n+2) {
	left: 360px;
}
#services > figure img:nth-child(4n+3) {
	left: 720px;
}
#block2 > section {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 12;
	background: #1f2226;
	transition:all .5s;
	opacity: 0;
}
#block2 > section img {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition:opacity .5s, transform 60s;
	opacity: 0;
}
#block2 > section img.show {
	opacity: .2;
	transform: translate(-40%,-60%) scale(1.2);
}
#block2 > div {
	position: relative;
	z-index: 13;
}
#block2 > a, #block4 > a {
	display: inline-block;
	width: 270px;
	padding: 15px 0;
	font-weight: bold;
	border: 2px solid #000;
	border-radius: 3px;
}
#block2 > a:hover, #block4 > a:hover {
	background: #0002;
}




#projects {
	overflow: hidden;
	margin: 50px 0;
}
#folio, #projects ul {
	font-size: 0;
	overflow: hidden;
	position: relative;
	transition:all .5s ease 0s;
}
#projects ul {
	width: 10000%;
}
#folio li, #projects ul li {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	height: 400px;
}
#projects ul li {
	width: 480px;
}
#folio li a, #projects ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 30% 10% 0;
	background: #1f2226;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
	z-index: 10;
}
#folio li a:hover, #projects ul li a:hover {
	text-shadow: 0 0 2px #000;
	z-index: 11;
}
#folio li a *, #projects ul li a * {
	position: relative;
}
#folio li a img, #projects ul li a img {
	display: block;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: .4;
	transition:all 1s;
}
#folio li:hover a img, #projects ul li:hover a img {
	opacity: .8;
	transform: translate(-50%,-50%) scale(.9);
}
#folio li a strong, #projects ul li a strong {
	display: block;
	font-size: 32px;
	line-height: 1;
	margin: 0 0 .5em;
}
#folio li a span, #projects ul li a span {
	font-size: 14px;
}







#block4 {
	text-align: center;
	padding: 40px 0 100px;
}
#block4 .wrap {
}
#partners {
	position: relative;
	margin: 0 0 30px;
}
#partners div {
	padding: 70px 0!important;
	overflow: hidden;
	border-bottom: 1px solid #e5e5e5;
}
#partners div ul {
	width: 10000%;
	position: relative;
	font-size: 0;
}
#partners div ul li {
	display: inline-block;
	vertical-align: top;
	width: 235px;
}
#partners div ul li a {
	display: block;
}
#partners div ul li a i {
	display: block;
}
#partners div ul li a i img {
	display: inline-block;
	vertical-align: bottom;
	width: 100%;
	height: auto;
	line-height: 1;
}
#partners > i, #partners > em {
	display: block;
	width: 11px;
	height: 18px;
	background: url(../i/arr1.png);
	position: absolute;
	top: 50%;
	margin: -9px 0 0;
	opacity: .2;
	cursor: pointer;
	transition:all .5s;
}
#partners > i {
	left: 7%;
}
#partners > em {
	right: 7%;
	transform: rotate(180deg);
}
#partners > i:hover, #partners > em:hover {
	opacity: 1;
}
.numbers {
	font-size: 0;
	margin: 30px 0 70px;
}
.numbers li {
	display: inline-block;
	vertical-align: top;
	width: 21%;
	font-size: 14px;
}
.numbers li:nth-child(2) {
	width: 16%;
}
.numbers li div {
/*	font-size: 100px;*/
	line-height: 1.1;
/*	color: #f16670;*/
	font-size: 60px;
	font-weight: 700;
}
.numbers li div span {
}
.numbers li div sup {
	font-size: 40px;
}
.technologies {
/*	margin: 90px 0 0;*/
	margin: 0 0 60px;
}
.technologies img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 70px 0 0;
}





#block5 {
	background: url(../i/dscnt.png) no-repeat 50% 65% #f7f5eb;
	text-align: center;
}
#block5 a {
	color: #f16670;
}
#block5 .wrap {
	height: 100%;
	padding: 50px 0 100px;
	position: relative;
	overflow: hidden;
}
/*#block5 .left {
	width: 900px;
}
#block5 .right {
	width: 480px;
	padding: 0 90px 0 70px;
	border-left: 1px solid #e5e5e5;
	margin: 120px 0 0;
}*/
#block5 .clear {
	padding: 30px 0 0;
	margin: 0 0 30px;
	border-bottom: 1px solid #e5e5e5;
}
#block5 h2 {
	font-size: 30px;
	margin: 30px 0 0;
}
#block5 h2+p {
	color: #666;
}
/*#block5 .left aside {
	display: inline-block;
	vertical-align: top;
	width: 400px;
	margin: 0 0 80px;
}
#block5 .left aside+aside {
	width: 360px;
	margin: 0 0 80px 80px;
}
#block5 .left aside div {
	font-size: 100px;
	line-height: 1.1;
	color: #f16670;
	margin: 0 0 20px;
}
#block5 .left aside div span {
}
#block5 .left aside div sup {
	font-size: 60px;
}
#block5 .left aside strong {
	display: block;
	font-size: 20px;
	margin: 0 0 .5em;
}
#block5 .left aside p {
	margin: 0;
}
#block5 .left .button {
	margin: 0 0 90px;
}
#block5 .right img {
	display: block;
	border-radius: 100%;
	margin: -120px 0 30px;
}
#block5 .right strong {
	display: block;
	font-size: 20px;
	margin: 0 0 .5em;
}
#block5 .right p {
	margin: 0 0 1em;
}
#block5 .right p a {
	font-weight: bold;
}
#block5 address {
	display: inline-block;
	vertical-align: top;
	width: 470px;
	font-style: normal;
}
#block5 address div {
	font-size: 30px;
	font-weight: 700;
}
#block5 address a {
	font-weight: bold;
}
#block5 section {
	display: inline-block;
	vertical-align: top;
	width: 440px;
	height: 64px;
	padding: 5px 0 0 80px;
	background: url(../i/brief.png) no-repeat;
}
#block5 section a {
	font-weight: bold;
}*/
/*#block5 footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 70px 0;
}
#block5 footer aside {
	float: left;
}
#block5 footer a {
	float: right;
	line-height: 38px;
	font-weight: 400;
	color: #000;
	padding: 0 30px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
}
#block5 footer a:hover {
	background: #e5e5e5;
}*/
#block5 aside {
	float: left;
	width: 450px;
	text-align: left;
}
#block5 aside+aside {
	float: right;
	margin: 130px 0 0;
}
#block5 aside div {
	font-size: 100px;
	font-weight: 700;
	color: #c56690;
}
#block5 aside div span {
}
#block5 aside div sup {
	font-size: 60px;
	font-weight: 400;
}
#block5 aside strong {
	display: block;
	font-size: 20px;
}
#block5 aside p {
	font-size: 14px;
	color: #666561;
}





h1.wrap {
	margin: 0 auto 1em;
	position: relative;
	z-index: 10;
}


article, article.wrap {
	margin: 0 auto;
	position: static;
}
article img {
	max-width: 100%;
	height: auto;
}
.img-left {
	float: left;
	margin: 0 30px 10px 0;
}
.img-right {
	float: right;
	margin: 0 0 10px 30px;
}
article {
}
article table {
}
article ul, article ol {
	margin: 1em 2em;
}
article ul {
	list-style: disc;
}
article ol {
}
article ul li, article ol li {
	margin: .2em 0;
}
article ul li {
}
article ol li {
}
article ul li p, article ol li p {
	margin: 0;
}
article p.intro {
	width: 65%;
}
article p.intro strong {
	font-size: 24px;
}





#main-services:before {
	content: "";
	display: block;
	width: 34px;
	height: 29px;
	background: url(../i/slide.png);
	position: absolute;
	top: -35px;
	left: 50%;
	margin: 0 0 0 -20px;
	opacity: .5;
}
.services, #main-services ul {
	font-size: 0;
	text-align: center;
	margin: 0 auto 10px;
}
#main-services ul {
	width: 99999px;
	text-align: left;
}
.services li, #main-services ul li {
	display: inline-block;
	vertical-align: top;
	width: 450px;
	height: 360px;
	position: relative;
	margin: 0 30px 30px 0;
	text-align: center;
	color: #000;
}
.services li:nth-child(3n) {
	margin: 0 0 30px;
}
.services li section, #main-services ul li section {
	width: 450px;
	height: 360px;
	padding: 40px 0;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	background: #f7f5eb;
	cursor: default;
	transition: all .5s;
}
.services li section:hover, #main-services ul li section:hover {
	height: 440px;
	margin: -40px 0 0;
	color: #fff;
	background: #000;
	z-index: 20;
}
.services li section > *, #main-services ul li section > * {
	position: relative;
	z-index: 3;
	transition: all .5s;
}
.services li section > img, #main-services ul li section > img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 2;
	transition: all .5s;
}
.services li section:hover > img, #main-services ul li section:hover > img {
	opacity: .4;
}
.services li section > i, #main-services ul li section > i {
	display: block;
	height: 140px;
	line-height: 140px;
	text-align: center;
}
.services li section:hover > i, #main-services ul li section:hover > i {
	opacity: 0;
}
.services li section > i img, #main-services ul li section > i img {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}
.services li section > strong, #main-services ul li section > strong {
	display: block;
	padding: 0 80px;
	font-size: 20px;
	margin: 0 0 1em;
}
.services li section:hover > strong, #main-services ul li section:hover > strong {
	padding: 0 10px;
	font-size: 30px;
	margin: -100px 0 1em;
}
.services li section > span, #main-services ul li section > span {
	display: block;
	font-size: 14px;
	color: #666561;
	padding: 0 70px;
}
.services li section:hover > span, #main-services ul li section:hover > span {
	color: #fff;
}
.services li section > a, #main-services ul li section > a {
	display: inline-block;
	padding: 15px 60px;
	border: 1px solid #fff6;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border-radius: 3px;
	opacity: 0;
	margin: 70px 0 0;
}
.services li section > a:hover, #main-services ul li section > a:hover {
	background: #fff2;
}
.services li section:hover > a, #main-services ul li section:hover > a {
	opacity: 1;
}





.video-about {
	width: 100%;
	height: 800px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 2;
}
.video-about video {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
}
.video-about:before, .video-about:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0
}
.video-about:before {
	top: 0;
	background: url(../i/va.png);
	z-index: 4;
}
.video-about:after {
	background: linear-gradient(to top, #ffff, #fff0);
	bottom: 0;
	z-index: 5;
}
.about {
	position: relative;
	z-index: 10;
}





.partners {
	font-size: 0;
}
.partners li {
	display: inline-block;
	vertical-align: top;
}
.partners li a {
	display: block;
	width: 280px;
	height: 220px;
	text-align: center;
	position: relative;
}
.partners li a:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #fc0;
	border-radius: 3px;
	background: #fc01;
	transition: transform .5s;
	transform: rotate(360deg) scale(0);
}
.partners li a:hover {
	z-index: 20;
}
.partners li a:hover:after {
	transform: none;
}
.partners li a i {
	display: block;
	width: 280px;
	height: 140px;
	margin: 0 0 10px;
	line-height: 140px;
}
.partners li a i img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	line-height: 1;
}
.partners li a span {
	display: block;
	font-size: 14px;
	padding: 0 10px;
}





.blog-list {
	list-style:none;
}
.blog-list li {
	padding:30px 25.5%;
	border-bottom:1px solid #e5e5e5;
	color:#4c4c4c;
	text-align:center;
}
.blog-list li > span {
	display:block;
	font-size:12px;
	color:#333;
}
.blog-list li > h2 {
	margin:0;
}
.blog-list li > img {
	display:block;
	max-width: 100%;
	height: auto;
	margin:10px auto 20px;
}
.blog-list li > p {
}
.blog-list li > aside {
	float:left;
	font-size:11px;
	color:#333;
	margin:5px 0 0;
}
.blog-list li > aside img {
	vertical-align:middle;
	margin:0 10px 0 0;
}
.blog-list li > aside span {
	margin:0 10px 0 0;
}
.blog-list li > div {
	margin:0 200px;
}





.b24 {
}
.b24 .var {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	margin: 2em 0;
}
.b24 .var > li {
	display: inline-block;
	vertical-align: bottom;
	width: 350px;
	margin: 0 30px;
}
.b24 .var > li img {
	display: block;
	width: 200px;
	margin: 0 auto 15px;
}
.b24 .var > li strong {
}
.b24 .var > li p {
}
.b24 .list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.b24 .list > li {
	overflow: hidden;
	margin: 0 0 10px;
}
.b24 .list > li > a {
	float: left;
	width: 120px;
}
.b24 .list > li > a img {
	display: block;
	max-width: 100%;
	max-height: 120px;
	margin: 0 auto;
}
.b24 .list > li > aside {
	margin: 0 0 0 150px;
}
.b24 .list > li > aside p {
	margin: 0;
}
.b24 .list > li > aside ul {
	margin: 0 2em;
}
.b24 iframe {
	display: block;
	width: 800px;
	height: 450px;
	margin: 3em auto;
}





footer {
	background: #000;
}
footer .wrap {
	padding: 60px 0;
	overflow: hidden;
	color: #666;
}
footer .wrap address {
	float: left;
	font-style: normal;
}
footer .wrap address div {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 .2em;
}
footer .wrap address div a {
	color: #fff;
}
footer .wrap address a {
	color: #c56690;
}
footer .wrap > a {
	float: right;
	padding: 10px 30px;
	border: 1px solid #333;
	color: #fff;
	font-weight: 700;
	border-radius: 3px;
}
footer .wrap > a:hover {
	background: #fff1;
}
footer .wrap section {
	margin: 0 680px 0 350px;
}
footer .wrap section a {
	font-weight: 700;
	color: #c56690;
}
footer .wrap .komp {
	float: right;
}
footer .wrap .komp a {
	margin: 0 0 0 5px;
}








#project {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1f2226;
	background: #1f2226ee;
	z-index: 120;
	display: none;
}
#project > i, #project > a, .popup > i, .popup > a {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50px;
	right: 50px;
	border-radius: 3px;
	cursor: pointer;
	transition:all .5s;
	z-index: 150;
}
#project > i:hover, #project > a:hover, .popup > i:hover, .popup > a:hover {
	background: #fff1;
}
#project > i:before, #project > i:after, #project > a:before, #project > a:after, .popup > i:before, .popup > i:after, .popup > a:before, .popup > a:after {
	content: "";
	display: block;
	width: 50px;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 25px;
	left: 0;
	transition:all .5s;
}
#project > i:before, #project > a:before, .popup > i:before, .popup > a:before {
	transform: rotate(45deg);
}
#project > i:after, #project > a:after, .popup > i:after, .popup > a:after {
	transform: rotate(-45deg);
}
#project > i:hover:before, #project > a:hover:before, .popup > i:hover:before, .popup > a:hover:before {
	transform: rotate(225deg);
}
#project > i:hover:after, #project > a:hover:after, .popup > i:hover:after, .popup > a:hover:after {
	transform: rotate(135deg);
}
#project .wrap {
	height: 100%;
	color: #fff;
}
#project .left {
	width: 930px;
	height: 100%;
	padding: 160px 0 0;
	position: relative;
}
#project .right {
	width: 360px;
	padding: 20vh 0 0 0;
}
#device-select {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	height: 80px;
	text-align: center;
}
#device-select a {
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	height: 80px;
	margin: 0 15px;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
}
#device-select a img {
	position: absolute;
	top: 0;
	left: 0;
}
#device-select a+a img {
	left: -88px;
}
#device-select a:hover {
	background: #fc01;
	border-color: #fc02;
}
#device-select a.active {
	border-color: #343940;
}
#device-select a.active img {
	top: -78px;
}
#device-view {
	height: 100%;
}
#device-view section {
	height: 100%;
	padding: 40px 0 0;
	background: url(../i/d1.png);
	position: relative;
	display: none;
}
#device-view section+section {
	width: 700px;
	padding: 90px 10px 0;
	background: url(../i/d2.png);
	margin: 0 auto;
}
#device-view section > a {
	display: block;
	position: absolute;
	top: 8px;
	left: 50%;
	width: 62%;
	height: 24px;
	font-size: 12px;
	line-height: 2;
	color: #fff;
	text-align: center;
	margin: 0 0 0 -31%;
}
#device-view section > a:hover {
}
#device-view section > div {
	height: 100%;
	overflow: hidden;
}
#device-view section > div img {
	width: 100%;
	height: auto;
	cursor: grab;
	position: relative;
}
#device-view section > div:after {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background: url(../i/swipe.png);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -30px;
	transition: all .5s;
}
#device-view section > div:hover:after {
	transform: scale(0);
	opacity: 0;
}
#project .right > strong {
	font-size: 26px;
	font-weight: 500;
}
#project .right > p {
	font-size: 16px;
	font-weight: 500;
	color: #737e8c;
	padding: 0 50px 0 0;
}
#project .right > ul {
	margin: 2em 0 0;
}
#project .right > ul li {
	font-size: 14px;
	margin: 0 0 1em;
}
#project .right > ul li strong {
	display: block;
	font-size: 16px;
}
#project .right > ul li strong a {
	color: #fff;
}





.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1f2226;
	background: #1f2226f5;
	z-index: 150;
	display: none;
}
.popup .wrap {
	color: #fff;
	padding: 60px 0 0;
}
.popup form {
	max-width: 960px;
	font-size: 0;
}
.popup form input, .popup form textarea {
	width: 97%;
	height: 60px;
	border-color: #fff;
	background: none;
	color: #fff;
	font-weight: 400;
	margin: 0 0 30px;
}
.popup form textarea {
	height: 180px;
}
.popup form strong {
	display: block;
	font-size: 50px;
	margin: 0 0 50px;
}
.popup form p {
	font-size: 16px;
	color: #737e8c;
	margin: -20px 0 50px;
}
.popup form aside {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding: 0 3% 0 0;
}
.popup form aside input, .popup form aside textarea {
	width: 100%;
}
.popup form .file {
	width: 600px;
	margin: 0 0 30px;
	position: relative;
}
.popup form .file input[type="file"] {
	width: 600px;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.popup form .file input[type="text"] {
	display: inline-block;
	vertical-align: middle;
	width: 450px;
	margin: 0;
}
.popup form .file button {
	display: inline-block;
	vertical-align: middle;
	width: 150px;
	margin: 0;
	border-color: #fff;
	padding: 0;
}
.popup form button {
	height: 60px;
	border: 1px solid #fc0;
	background: none;
	color: #fff!important;
	padding: 0 60px;
}