@charset "utf-8";
/* CSS Document */
/**/
#allbox{
	position:relative;
	width:100%;
	max-width:1920px;
	overflow:hidden;
	}
#logo{
	position:absolute;
	left:0;
	z-index:6;
	cursor:pointer;	
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.logo,.logobg{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	left:0;
	top:0;
	}
.logo{background-image:url(../images/logo.png);}
.logobg{background-image:url(../images/logo2.png);}
.lowb{top:18px;width:137px;height:151px;}
.lows{top:10px;width:100px;height:110px;}
/**/
#mubox{
	position: fixed;
	min-height:700px;
	height:100vh;
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-image:url(../images/mubg.png);
	background-position:0 0;
	background-size:100% auto;
	top:0;
	/*left:0;*/
	z-index:5;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#mubox.wb .idea{
	position:absolute;
	width:27.58%;
	padding-bottom:216.33%;/*784.375*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-image:url(../images/idea.png);
	background-size:100% auto;
	left:50%;
	margin-left:-16px;
	bottom:0;
	}
.wb{left:0;width:116px;}
.ws{width:85px;}
#mubox.wb > ul{
	position:relative;
	padding:180px 0 0 0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#mubox.wb > ul > li,#mubox.wb > ul > li a{
	position:relative;
	width:75px;
	font-size:1.58rem;
	color:#fff;
	margin:0 auto 20px;
	display:block;
	cursor:pointer;	
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#mubox.wb > ul > li  span{
	position:relative;
	font-size:1.16rem;
	font-weight:300;
	color: #473c33;
	display: block;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#mubox.ws .idea{
	width:33%;
	padding-bottom:258.84375%;/*784.375*/
	}
#mubox.ws > ul{padding:131px 0 0 0;}
#mubox.ws > ul > li ,#mubox.ws > ul > li a{
	width:68px;
	font-size:1.4rem;
	margin:0 auto 16px;
	}
#mubox.ws > ul > li span{
	font-size:1.13rem;
	letter-spacing:1.13px;
	}
#mubox.wb > ul > li:hover,#mubox.wb > ul > li a:hover{
	color:#ffd237;
	}
#mubox.wb > ul > li:hover  span{
	color:#ffd237;
	}
/**/
.moc{
 position:fixed;
 width:57px;
 height:57px;
 cursor:pointer;
 /**/
 flex-direction:column;
 display:flex;
 align-items:center;
 justify-content:center;
 top:-60px;
 left:0;
 z-index:6;
/**/
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
 } 
.moc >.line{
 width:50%;
 height:3px;
 border-radius:5px;
 background-color:rgb(71,60,50); 
 transition: all .3s;
 -moz-transition: all .3s;
 -webkit-transition: all .3s;
 -o-transition: all .3s;
 }
.moc > .line:first-child {	
 margin-bottom:8.77%;
 }
.moc > .line:last-child {
 margin-top:8.77%;
 }
.moc.is-active > .line {
 opacity:0;
 background-color:rgb(255,255,255); 
 transform:rotate(45deg);
 }
.moc.is-active > .line:first-child {
 opacity:1;
 margin-bottom:-3.5%;
 transform:rotate(-45deg);
 }
.moc.is-active > .line:last-child {
 opacity:1;
 margin-top:-7.01%;
}
/**/
#home > div,#about{
	position:relative;
	width:100%;
	background-attachment:scroll;
	}
#home{
	width:100%;
	padding-bottom:950px;
	}
#home > div{
	position:fixed;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image:url(../images/home.jpg);
	top:0;
	left:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#about{
	background-repeat:no-repeat,repeat;/*repeat-y*/
	background-position:50% 0%,50% 0%;
	background-image:url(../images/about.jpg),url(../images/about_02.jpg);
	}
#about > .about{
	position:relative;
	width:1050px;
	padding:100px 0 170px 0;
	margin:0 auto;
	color:#424242;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image:url(../images/about_04.png);
	}
.ao1{
	position:relative;
	width:57%;
	font-size:1.5rem;
	line-height:2.9rem;
	color:#424242;
	}
.aow6{
	position:relative;
	width:45.71%;/*480px*/
	padding-bottom:8.09067%;/*17.7 85px*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/w6.svg);/*png*/
	background-size:100% auto;
	margin:20px 0 30px 0;
	}
.ao2{
	position: relative;
	width: 57%;
	font-size:1.91rem;
	line-height: 2.5rem;
	color: #151415;
	font-weight:bold;
	}
.ao2 span{
	display: block;
	font-size: 2.3rem;
	font-weight:800;
	margin-bottom:10px;
	}
.cbc{
	position:absolute;
	width:40%;/*420px*/
	padding-bottom:36.856%;/*387 92.14*/
	top:130px;
	right:0;
	}
.cbc > div{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	top:0;
	left:0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.cbc .cb1{background-image:url(../images/cbc1.png);}
.cbc .cb2{background-image:url(../images/cbc2.png);}
.cbc .cb3{background-image:url(../images/cbc3.png);}	
/**/			
#work{position:relative;width:100%;background-color:#f7f5f5;}
#work > div{
	position:relative;
	width:99%;
	padding:66px 0 50px 0;
	margin:0 auto;
	text-align:center;
	}
#work > div >ul{margin:15px auto;}
#work > div >ul li{
	position: relative;
	width: 24.2%;/*429px*/
	/*padding-bottom:13.53748%;240px 55.94*/
	/*float: left;*/
	display:inline-block;
	cursor: pointer;
	padding:0 .4%;
	margin:.6% -2px;/*.6% .4%*/
	overflow:hidden;
	opacity:0;
	/**/
	box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	/*
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;*/
	}
#work > div >ul li > a {
	position: relative;
	width:100%;
	padding-bottom:55.94%;
	display:block;
	background-color:#e3e3e3;
	border: 1px solid #e3e3e3;
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#work > div >ul li > a > .ph{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	overflow:hidden;
	}
#work > div >ul li > a > .ph img{
	width:100%;
	display:block;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#work > div >ul li > a > .c_box{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.7);
	left:0;
	top:0;
	opacity:0;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#work > div >ul li > a > .c_box > span{
	position:relative;
	width:90%;
	font-size:1.333rem;
	line-height:1.83rem;
	color:#FFF;
	text-align:left;
	top:80%;
	opacity:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#work > div >ul li > a > .c_box > span > .s_box{
	position:relative;
	min-width:55px;
	height:23px;
	font-size:1.25rem;
	line-height:2rem;
	color:#FFF;
	text-align:center;
	padding:0 5px 0 3px;
	border-radius:3px;
	display:inline-block;
	background-color:#ff8600;
	}
#work > div >ul li > a > .c_box > span > strong{
	position:relative;
	font-size: 1.5rem;
	line-height: 2rem;
	color: #ffba00;
	display:block;
	margin:10px 0 5px;
	top:50%;
	/**/
	transition: all .6s;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	}
#work > div >ul li > a > .c_box > span > span{
	position:relative;
	top:50%;
	/**/
	transition: all .7s .1s;
	-moz-transition: all .7s .1s;
	-webkit-transition: all .7s .1s;
	-o-transition: all .7s .1s;
	}
#work > div >ul li:hover .c_box{
	opacity:1;
	}
#work > div >ul li:hover .ph img{
	filter: blur(.5rem);
	}
#work > div >ul li:hover .c_box > span{
	top:0;
	opacity:1;
	}
#work > div >ul li:hover .c_box > span > strong{
	top:0;
	}
#work > div >ul li:hover .c_box > span > span{
	top:0;
	}
/**/
#team{
	position:relative;
	width:100%;
	padding:30px 0 50px 0;/*66px*/
	margin:0 auto;
	text-align:center;
	}	
.avatar{
	position: relative;
	width: 100%;
	padding-bottom:20px;/**/
	display: block;
	border-radius:0;/*200px*/
	background-color:transparent;/*#e3e3e3*/
	opacity:.7;
	overflow: hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.icon{
	position:relative;
	width:90px;
	padding-bottom:90px;
	display:block;
	margin:0 auto;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.ic1{background-image:url(../images/icon1.svg);}
.ic2{background-image:url(../images/icon2.svg);}
.ic3{background-image:url(../images/icon3.svg);}
.ic4{background-image:url(../images/icon4.svg);}
.ic5{background-image:url(../images/icon5.svg);}
.ic6{background-image:url(../images/icon6.svg);}
.name{
	position:relative;
	/*width: 80px;*/
	display:block;/*inline-block*/
	font-size: 1.8rem;
	line-height: 2.2rem;
	letter-spacing:1.5px;
	font-weight:700;
	color:#a2a2a2;/*504942*/
	padding:5px 5px;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.name > span{
	display:block;
	font-size:1.15rem;
	line-height: 2rem;
	letter-spacing:2.5px;
	color:#b6b6b6;/*757575*/
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#team .swiper-container {
	width:90%;
	margin:30px auto 10px;
    }
#team .swiper-slide {
	position:relative;
	text-align:center;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transform:scale(.75);
	/**/
	/*filter: blur(.5rem);
	filter:brightness(.8);*/
	/*-webkit-filter:brightness(.9);*/
    }
#team .swiper-slide > div{
	position:relative;
	width:100%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#team .swiper-slide img{position:relative;width:100px;/**/display:block; margin:0 auto;}
#team .swiper-slide-active {
	  transform:scale(1);
	  /*filter: blur(0rem);
	  filter: brightness(1);*/
    }
#team .swiper-slide-active .avatar{
	/*border-radius: 200px;
	background-color:#fcfcfc;ffc435 */ 
	opacity:1;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#team .swiper-slide-active .icon{
	background-position:0% 100%;
	}
#team .swiper-slide-active .name{
	color:#504942;
	}
#team .swiper-slide-active .name > span{
	color:#757575;
	}
#team .swiper-button-next,.swiper-button-prev {
    position:absolute;
    top:50%;
    width:45px;/**/
    height:124px;/**/
    margin-top:-62px;
	display:none;
    cursor:pointer;
    background-position: center;
    background-repeat: no-repeat;
	background-size:100% auto;
	z-index:10;
	outline: none;
	}
.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white {
	left:0;
	background-image: url(../images/prev.png);
	}
.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white {
	right:0;
	background-image: url(../images/next.png);
	}
/**/
#clients{
	position:relative;
	width:100%;
	background-attachment:scroll;
	background-repeat:no-repeat,repeat-y;
	background-position:50% 100%,50% 0%;
	background-image:url(../images/clients.jpg),url(../images/clients_bg.jpg);
	}
.clients{
	position:relative;
	width:1300px;
	padding:66px 0 30px 0;
	margin:0 auto;
	text-align:center;
	/*overflow:hidden;*/
	}
.clients ul{margin:10px auto; overflow:hidden;}
.clients  ul li{
	position:relative;
	width:14.6%;
	display:inline-block;
	padding:0 1%;
	margin:1.2% -2px;
	opacity:0;
	/**/
	box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	}
.clients  ul li > img{
	position:relative;
	display:block;
	width:100%;
	}
.cdown{
	position:relative;
	clear:both;
	width:1000px;
	padding-bottom:520px;
	margin:0 auto;
	}
#about,#work,#clients{padding-left:85px;}
.title{
	position:relative;
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	margin-bottom:30px;
	}

.t1{width:300px;padding-bottom:70px;background-image:url(../images/title1.png);}
.t2,.t3,.t4{width:300px;padding-bottom:70px;}
.t2{background-image:url(../images/title2.png);opacity:0;}
.t3{background-image:url(../images/title3.png);}
.t4{background-image:url(../images/title4.png);opacity:0;}

@media only screen and (max-width:1200px){
/**/
#about > .about{width:95%;}
#work > div >ul li{
	width:32.5%;
	 /*padding-bottom:18.1805%;55.94*/
	padding:0 .4%;
	margin:.6% -2px;
	}
.clients{width:99%;}
.clients  ul li{width:18%;}
.cdown{width:100%;}
#team .swiper-button-next,.swiper-button-prev {
	display:block;
	}
#team .swiper-container {
	width:98%;
    }
}
@media only screen and (max-width:800px){
/**/
.ao2{width:100%;}
.cbc{
	width:43%;
	padding-bottom:39.6202%;
	top:190px;
	}
/**/
#work > div >ul li{
	width:49%;
	/*padding-bottom:27.4106%;*/
	padding:0 .5%;
	margin:.7% -2px;
	}
.clients  ul li{
	width:23%;
	margin: 1.5% -2px;
	}
/*
.name{
	font-size: 1.5rem;
	line-height:1.8rem;
	}
.name > span{
	font-size:1rem;
	letter-spacing:1.2px;
	}*/
}
@media only screen and (max-width:790px){
/**/
}
@media only screen and (max-width:600px){
/**/
.clients  ul{width:98%;}
.clients  ul li{
	width:31.2%;
	margin:2% -2px;
	}
}
@media only screen and (max-width:550px){
/**/	
#logo{left:13px;}
.lowb,.lows{top:50px;width:90px;height:99px;}
#mubox.wb .idea{display:none;}
#mubox.wb > ul,#mubox.ws > ul{padding:160px 0 0 0;}
.wb{left:-117px;}
.mop{left:0;}
.wb,.ws{width:116px;}
#mubox.wb > ul > li,#mubox.wb > ul > li a,
#mubox.ws > ul > li,#mubox.ws > ul > li a{
	width:75px;
	font-size:1.58rem;
	margin:0 auto 15px;
	}
#mubox.wb > ul > li  span,#mubox.ws > ul > li span{font-size:1.16rem;}
/**/
.moc{top:0;}
/**/
#home{
	height:100vh;
	padding-bottom:0;/*175.63%*/
	}
#home > div{
	background-image:url(../images/home_m.jpg);
	background-size:100% auto;
	}
#about{
	background-repeat:no-repeat,repeat-y;/**/
	background-position:50% 0%,50% 0%;
	background-image:url(../images/about_m.jpg),url(../images/about_02.jpg);
	background-size:100% auto;
	}
#about > .about{width:86%;padding: 100px 0 40% 0;background-size:130% auto;}/*170px*/
.ao1{
	width:100%;
	font-size:1.3rem;
	line-height:2.3rem;
	}
.aow6{
	width:100%;
	padding-bottom:17.7%;/*17.7 85px*/
	margin:15px auto 15px;
	}
.ao2{
	font-size:1.71rem;
	line-height: 2.5rem;
	}
.ao2 span{
	font-size:2.3rem;
	margin-bottom:10px;
	}
.cbc{
	position:relative;
	width:90%;
	padding-bottom:82.926%;/*387 92.14*/
	top:0;
	margin:10px auto 30px;
	}
/**/
#work > div{width:100%;}
#work > div >ul li{
	width:97%;
	/*padding-bottom:54.2618%;
	float:none;*/
	padding:0 0;
	margin:1.5% auto;
	}

#team .swiper-container {
	width:100%;
    }
#team .swiper-slide {
	transform:scale(.75);
	 opacity:.8;
    }


#team .swiper-slide-active {
	  transform:scale(1);
	  opacity:1;
	  /*filter: blur(0rem);
	  filter: brightness(1);*/
    }
#about,#work,#clients{padding-left:0;}
/**/
#clients{
	background-image:url(../images/clients_m.jpg),url(../images/clients_bg_m.jpg);
	background-size:100% auto;
	}
.clients{width:100%;}
.cdown{
	padding-bottom:65%;
	margin:0 auto;
	}
}
@media only screen and (max-width:450px){
/**/ 

}
@media only screen and (max-width:390px){
/**/
.title{margin-bottom:20px;}
.t1{
	width:90%;
	padding-bottom:20.97%;/*23.3%*/
	}
.t2,.t3,.t4{
	width:77.4%;
	padding-bottom:18.0342%;
	}
}
@media only screen and (max-width:360px){
/**/

}

/**/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fir{
	animation:fadeInUp .6s ease;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInUp .6s ease;
	-webkit-animation-fill-mode:forwards;
	}
.fir2{
	animation:fadeInUp .8s ease;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInUp .8s ease;
	-webkit-animation-fill-mode:forwards;
	}
		
@-webkit-keyframes fadeInBottomRight{
	0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}
	to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
	}
@keyframes fadeInBottomRight{
	0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}
	to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
	}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}