@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,cyrillic-ext);

ul,
ol {list-style: none;margin: 0;padding: 0;}
ul ul,
ol ul,
ul ol,
ol ol {
  list-style: none;
  margin: 0;padding: 0;
}
a, li, button, input, textarea {
    outline: none !important;
}
.clear {
    clear: both;
}
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}
body {
    background: #fff;
    color: #000;
    font: 14px/20px "Open Sans", sans-serif;
}
p {
    color: #000;
    font: 14px/20px "Open Sans", sans-serif;
    margin: 0 0 10px;    
}
a {
    color: #000;
    text-decoration: none;
}
.main-container {
    max-width: 1320px;
    display: block;
    margin: 0 auto;
    -moz-box-shadow: 0 0 35px rgba(190,190,190,1);
    -webkit-box-shadow: 0 0 35px rgba(190,190,190,1);
    box-shadow: 0 0 35px rgba(190,190,190,1);  
    overflow: hidden;      
}
header, section {
    display: block;
    width: 100%;
    float: left;
    position: relative;
}
/*header*/
header {
    height: 601px;
    background: url("../images/bg1.jpg") no-repeat top center;
}
/*logo*/
.logo {
    display: block;
    width: 100%;
    white-space: nowrap;
    margin: 18px 0 0;
}
.logo a {
    text-decoration: none;
}
.logo2{
    display: block;
    width: 100%;
    white-space: nowrap;
}
.logo2 a {
    text-decoration: none;
}
/*nav*/
.nav {
    display: block;
    width: 100%;
    float: left;
    padding: 0 0 0 41px;
    margin: 47px 0 0;
}
.nav li {
    display: inline-block;
    float: left;
}
.nav li a {
    text-decoration: none;
    color: #fff;
    font: 16px/16px 'Roboto Slab', serif;
    display: inline-block;   
    padding: 0 10px;
}
.nav li a:hover {
    text-decoration: underline;
}
/*head-phone*/
.head-phone {
    display: block;
    width: 100%;
    float: left;
    text-align: right;
    margin: 47px 0 0;
}
.head-phone li {
    color: #fff;
    font: 22px/22px 'Roboto Slab', serif;
}
.head-phone li span {
    position: relative;
}
.head-phone li span:before {
    content: "";
    display: block;
    position: absolute;
    left: -28px;
    top: 9px;
    background: url("../images/icon/sprite.png") no-repeat 0 0;
    width: 11px;
    height: 17px;
}
.head-phone li a {
    font: 12px/12px "Open Sans", sans-serif;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.5);
}
.head-phone li a:hover {
    border: transparent;
	margin: 0 0 1px;
}
/*head-center*/
.head-center {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    margin: 21px 0 0;
}
/*sub-title*/
.sub-title {
    display: inline-block;
    color: #000;
    font: 35px/35px 'Roboto Slab', serif;
    background-color: rgba(255,255,255,.9);
    padding: 7px 13px 10px 12px;
    -webkit-transform: rotate(-0.7deg);
    -moz-transform: rotate(-0.7deg);
    -o-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);       
}
h1 {
    display: inline-block;
    color: #000;
    font: 55px/55px 'Roboto Slab', serif;
    background-color: rgba(255,255,255,.9);
    margin: 4px 0 0;
    position: relative;
    padding: 0 14px 11px 15px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);     
}
/*btn*/
.btn {
    width: 220px;
    height: 55px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #fff;
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.2), inset 0 0 6px rgba(255,255,255,.47);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2), inset 0 0 6px rgba(255,255,255,.47);
    box-shadow: 1px 1px 1px rgba(0,0,0,.2), inset 0 0 6px rgba(255,255,255,.47);
    background: rgb(127, 202, 241);
    background: -moz-linear-gradient(140deg, rgb(127, 202, 241) 25%, rgb(255, 255, 91) 85%);
    background: -webkit-linear-gradient(140deg, rgb(127, 202, 241) 25%, rgb(255, 255, 91) 85%);
    background: -o-linear-gradient(140deg, rgb(127, 202, 241) 25%, rgb(255, 255, 91) 85%);
    background: -ms-linear-gradient(140deg, rgb(127, 202, 241) 25%, rgb(255, 255, 91) 85%);
    background: linear-gradient(140deg, rgb(127, 202, 241) 25%, rgb(255, 255, 91) 85%);    
    display: inline-block;
    text-decoration: none;
    border: 0;
    color: #000;
    font: 18px/55px 'Roboto Slab', serif;
    text-align: center;
}
.btn:hover {
    background: rgb(127, 202, 241);
    background: -moz-linear-gradient(140deg, rgb(255, 255, 91) 25%, rgb(127, 202, 241) 85%);
    background: -webkit-linear-gradient(140deg, rgb(255, 255, 91) 25%, rgb(127, 202, 241) 85%);
    background: -o-linear-gradient(140deg, rgb(255, 255, 91) 25%, rgb(127, 202, 241) 85%);
    background: -ms-linear-gradient(140deg, rgb(255, 255, 91) 25%, rgb(127, 202, 241) 85%);
    background: linear-gradient(140deg, rgb(255, 255, 91) 25%, rgb(127, 202, 241) 85%);     
	-webkit-transform: scale(1.03) !important;
	-moz-transform: scale(1.03) !important;
	-ms-transform: scale(1.03) !important;
	transform: scale(1.03) !important;  
    -webkit-transition: transform 500ms ease 0s !important;
    -moz-transition: transform 500ms ease 0s !important;
    -o-transition: transform 500ms ease 0s !important;
    -ms-transition: transform 500ms ease 0s !important;
    transition: transform 500ms ease 0s !important;     
}
.head-center .btn {
    margin: 70px 0 0;
}
/*box1*/
#box1 {
    position: relative;
    top: -90px;
}
.box1 {
    margin: 45px 0 0;
}
.title {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    color: #000;
    font: 22px/30px 'Roboto Slab', serif;
    margin: 0 0 54px;
}
.title span {
    display: block;
}
/*issue-content*/
.issue-content > div {
    text-align: center;
    min-height: 184px;
}
.issue-content > div:hover .issue-title {
    color: #cc0000;
}
/*issue-title*/
.issue-title {
    color: #000;
    font: 600 14px/18px "Open Sans", sans-serif;
    display: block;
    width: 100%;  
    margin: 0 0 6px; 
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;  	
}
.issue-content > div:hover p {
    color: #cc0000;
}
.issue-title:before {
    content: "";
    display: block;
    margin: 0 auto 24px;
    background: url("../images/icon/sprite.png") no-repeat;
    height: 41px;
}
.issue-title span {
    display: block;
}
.issue-content > div p {
    font: 12px/17px "Open Sans", sans-serif;
    margin: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;  	
}
.issue-content > div p span {
    display: block;
}
/*issue-1*/
.issue-1 .issue-title:before {
    background-position: -21px 0;
    width: 25px;
}
.issue-content > .issue-1:hover  .issue-title:before {
    background-position: -21px -51px;
    width: 25px;
}
/*issue-2*/
.issue-2 .issue-title:before {
    background-position: -56px 0;
    width: 34px;
}
.issue-content > .issue-2:hover  .issue-title:before {
    background-position: -56px -51px;
    width: 34px;
}
/*issue-3*/
.issue-3 .issue-title:before {
    background-position: -100px 0;
    width: 24px;
}
.issue-content > .issue-3:hover  .issue-title:before {
    background-position: -100px -51px;
    width: 24px;
}
/*issue-4*/
.issue-4 .issue-title:before {
    background-position: -134px 0;
    width: 31px;
}
.issue-content > .issue-4:hover  .issue-title:before {
    background-position: -134px -51px;
    width: 31px;
}
/*issue-5*/
.issue-5 .issue-title:before {
    background-position: -175px 0;
    width: 33px;
}
.issue-content > .issue-5:hover  .issue-title:before {
    background-position: -175px -51px;
    width: 33px;
}
/*issue-6*/
.issue-6 .issue-title:before {
    background-position: -218px 0;
    width: 26px;
}
.issue-content > .issue-6:hover  .issue-title:before {
    background-position: -218px -51px;
    width: 26px;
}
/*issue-7*/
.issue-7 .issue-title:before {
    background-position: -254px 0;
    width: 64px;
}
.issue-content > .issue-7:hover  .issue-title:before {
    background-position: -254px -51px;
    width: 64px;
}
/*issue-8*/
.issue-8 .issue-title:before {
    background-position: -328px 0;
    width: 33px;
}
.issue-content > .issue-8:hover  .issue-title:before {
    background-position: -328px -51px;
    width: 33px;
}
.box2 {
    background: url("../images/bg2.jpg") no-repeat top center #f7f7f4;
    padding: 96px 0 52px;
}
h2 {
    text-align: center;
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 8px;
    color: #000;
    font: 35px/35px 'Roboto Slab', serif; 
}
.box2 .swiper-button-next {
    right: 50px;    
}
.box2 .swiper-button-prev {
    left: 50px;
}
/*slide-txt*/
.slide-txt {
    display: block;
    float: left;
    position: relative;
}
.slide-txt:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
}
.slide-txt span {
    display: block;
    width: 100%;
    color: #000;
    font: 600 14px/14px "Open Sans", sans-serif;   
    margin: 0 0 8px;
}
.slide-txt p {
    margin: 0 0 7px;
    font: 12px/17px "Open Sans", sans-serif; 
}
/*.st-1*/
.st-1, .st-4 {
    margin: 0 0 90px;
}
.st-1:before {
    background: url("../images/icon/arrow-1-1.png") no-repeat;
    top: 8px;
    right: -155px;
    width: 148px;
    height: 82px;
}
.st-2:before {
    background: url("../images/icon/arrow-1-2.png") no-repeat;
    top: 7px;
    right: -69px;
    width: 64px;
    height: 51px;
}
.st-3:before {
    background: url("../images/icon/arrow-1-3.png") no-repeat;
    top: 10px;
    left: -50px;
    width: 46px;
    height: 117px;
}
.st-1, .st-2, .st-4, .st-5 {
    width: 191px;
    text-align: right;
}
.st-3, .st-6 {
    width: 277px;
    float: right;
}
/*slide-img*/
.slide-img {
    display: block;
    width: 100%;
    float: left;
}
.slide1 .slide-img {
    margin: 4px 0 0 -39px;
}
.slider > .swiper-pagination {
    top: 2px;
    bottom: inherit;
    height: 12px;
}
.slider {
    padding: 35px 0 0;
}
.slider .swiper-pagination-bullet {
    background: none;
    border-radius: 100%;
    display: inline-block;
    height: 12px;
    opacity: 1;
    width: 12px;
    border: 1px solid #aab959;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    position: relative;
}
.slider .swiper-pagination-bullet-active:before {
    content: "";
    width: 8px;
    height: 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #68751f;
    position: absolute;
    top: 1px;
    left: 1px;
}
/*slide2*/
.slide2 .slide-img {
    margin: 1px 0 0 0;
    padding: 0 0 0 118px;
}
.st-4:before {
    background: url("../images/icon/arrow-2-1.png") no-repeat;
    top: 9px;
    right: -234px;
    width: 229px;
    height: 53px;
}
.st-5:before {
    background: url("../images/icon/arrow-2-2.png") no-repeat;
    top: 8px;
    right: -205px;
    width: 194px;
    height: 73px;
}
.st-6:before {
    background: url("../images/icon/arrow-2-3.png") no-repeat;
    top: 10px;
    left: -121px;
    width: 117px;
    height: 64px;
}
/*slide3*/
.slide3 .slide-img {
    margin: 3px 0 0 -38px;
}
/*box3*/
.box3 {
    background: url("../images/city.png") no-repeat bottom center #f3f3db;
    height: 580px;
    padding: 56px 0 0;
}
.box3:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 40px;
    background: url("../images/reasons-top.png") no-repeat top center;
    left: 0;
    top: -40px;
}
h3 {
    text-align: center;
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 57px;
    color: #000;
    font: 35px/35px 'Roboto Slab', serif; 
}
/*reasons-box*/
.reasons-box {
    display: block;
    float: left;
    white-space: nowrap;
    padding: 0 0 0 75px;
}
/*r-num*/
.r-num {
    margin: 0 0 0 -75px;
    position: relative;
    float: left;
    display: block;
    width: 65px;
    height: 65px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    border: 2px solid rgba(163,180,77,.3);
    text-align: center;
    color: #000;
    font: 35px/57px 'Roboto Slab', serif;     
}
.r-num:before {
    content: "";
    display: block;
    position: absolute;
    top: 63px;
    left: 29px;
    width: 3px;
    background: rgba(163,180,77,.3);
}
/*r-txt*/
.r-txt {
    float: left;
    width: 100%;
    color: #000;
    font: 600 14px/18px "Open Sans", sans-serif;  
    padding: 3px 0 0;
}
/*r-1*/
.r-1 {
    margin: 50px 0 0;
}
.r-1 .r-num:before {
    height: 171px;
}
/*r-2*/
.r-2 {
    margin: 45px 0 0 105px;
}
.r-2 .r-num:before {
    height: 66px;
}
/*r-3*/
.r-3 {
    margin: 0 0 0 21px;
}
.r-3 .r-num:before {
    height: 207px;
}
/*r-4*/
.r-4 {
    margin: 55px 0 0 141px;
}
.r-4 .r-num:before {
    height: 64px;
}
/*r-5*/
.r-5 {
    margin: 40px 0 0 -18px;
}
.r-5 .r-num:before {
    height: 191px;
}
/*r-6*/
.r-6 {
    margin: 75px 0 0 71px;
}
.r-6 .r-num:before {
    height: 54px;
}
/*r-7*/
.r-7 {
    margin: 110px 0 0 5px;
}
.r-7 .r-num:before {
    height: 105px;
}
.r-7 .r-txt {
    font: 600 14px/23px "Open Sans", sans-serif;  
}
/*box4*/
#box4 {
    position: relative;
    top: -100px;
}
.box4 {
    padding: 70px 0 55px;
}
.box4:before {
    content: "";
    background: url("../images/white-top.png") no-repeat top right;
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 5;
    left: 0;
    top: -40px;
}
/*section-title*/
.section-title {
    text-align: center;
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 55px;
    color: #000;
    font: 35px/35px 'Roboto Slab', serif; 
}
/*format-txt*/
.format-txt p span {
    font: 600 16px/16px "Open Sans", sans-serif;  
    display: block;
    margin: 5px 0 0;
}
/*format-img*/
.format-img {
    display: block;
    float: left;
    width: 100%;
    margin: 17px 0 21px;
}
/*f-box*/
.f-box {
    display: block;
    width: 100%;
    padding: 0 0 0 85px;
}
/*f-title*/
.f-title {
    display: block;
    width: 100%;
    float: left;   
    color: #000;
    font: 14px/14px "Open Sans", sans-serif;   
}
/*f-list*/
.f-list {
    display: block;
    width: 100%;
    float: left;      
}
.f-list li {
    padding: 0 0 0 30px; 
    display: block;
}
/*f-list-num*/
.f-list-num {
    margin: 10px 0 36px;
}
.f-list-num li {
    color: #000;
    font: 600 14px/25px "Open Sans", sans-serif;     
}
.f-list-num li span {
    float: left;
    width: 19px;
    height: 19px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    background-color: #bfc54b;
    text-align: center;
    margin: 3px 0 0 -31px;
    color: #fff;
    line-height: 19px;
}
.f-list-num li+li span {
    background: #5fa3bf;
}
/*f-list-time*/
.f-list-time {
    margin: 13px 0 27px;
}
.f-list-time li {
    font: 14px/20px "Open Sans", sans-serif; 
}
.f-list-time li:first-child {
    font-weight: 600;
    position: relative;
    margin: 0 0 5px;
}
.f-list-time li:first-child:before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: -1px;
    background: url("../images/icon/sprite.png") no-repeat -371px 0;
    width: 19px;
    height: 19px;
}
/*f-list-col*/
.f-list-col {
    margin: 13px 0 0;
}
.f-list-col li {
    font: 14px/20px "Open Sans", sans-serif; 
    position: relative;
}
.f-list-col li span {
    font-weight: 600;
}
.f-list-col li:first-child {
    margin: 0 0 5px;
}
.f-list-col li:before {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: 1px;
    background: url("../images/icon/sprite.png") no-repeat;
    width: 19px;
    height: 19px;    
}
.f-list-col li:first-child:before {
    background-position: -400px 0;
}
.f-list-col li:first-child+li:before {
    background-position: -429px 0;
}
/*box5*/
.box5 {
    background: url("../images/bg3.jpg") no-repeat top center;
    height: 622px;
    padding: 96px 0 0;
}
.box5:before {
    content: "";
    background: url("../images/white-bottom.png") no-repeat top right;
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
}
.box5 .section-title {
    color: #fff;
    position: relative;
    margin: 0 0 74px;
}
/*work-content*/
.work-content {
    display: block;
    width: 100%;
    position: relative;
    float: left;    
}
.work-content:before {
    content: "";
    background: url("../images/work-bg.png") no-repeat 0 0;
    width: 100%;
    height: 453px;
    position: absolute;
    top: -172px;
    left: -7px;
    display: block;
}
/*work-box*/
.work-box {
    display: block;
    float: left;
    white-space: nowrap;
    padding: 0 0 0 85px;
    position: relative;
}
/*w-img*/
.w-img {
    float: left;
    margin: 0 0 0 -85px;
    display: block;
    width: 70px;
    height: 70px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border-radius: 35px;
    background-color: #357793;
    overflow: hidden;
}
.w-img img {
    display: block;
    float: left;
}
/*w-txt*/
.w-txt {
    font: 600 14px/20px "Open Sans", sans-serif; 
    color: #fff;
    display: block;
    float: left;
}
/*w-1*/
.w-1 {
    margin: 0 0 0 -1px;
}
.w-1 .w-img img {
    margin: 12px 0 0 15px;
}
.w-1 .w-img {
    margin-top: 3px;
}
/*w-2*/
.w-2 {
    margin: 55px 0 0 49px;
}
.w-2 .w-img {
    margin-top: -10px;
}
.w-2 .w-img img {
    margin: 18px 0 0 21px;
}
/*w-3*/
.w-3 {
    margin: 65px 0 0 99px;
}
.w-3 .w-img {
    margin-top: -10px;
}
.w-3 .w-img img {
    margin: 7px 0 0 13px;
}
/*w-4*/
.w-4 .w-img {
    margin-top: -6px;
}
.w-4 .w-img img {
    margin: 19px 0 0 16px;
}
/*w-5*/
.w-5 {
    margin: 50px 0 0 51px;
}
.w-5 .w-img {
    margin-top: 3px;
}
.w-5 .w-img img {
    margin: 18px 0 0 26px;
}
/*w-6*/
.w-6 .w-img {
    margin-top: -10px;
}
.w-6 .w-img img {
    margin: 15px 0 0 15px;
}
/*w-7*/
.w-7 {
    margin: 49px 0 0 51px;
}
.w-7 .w-img {
    margin-top: 5px;
}
.w-7 .w-img img {
    margin: 17px 0 0 19px;
}
/*w-8*/
.w-8 {
    margin: 69px 0 0 101px;
}
.w-8 .w-img {
    margin-top: -23px;
}
.w-8 .w-img img {
    margin: 15px 0 0 24px;
}
/*box6*/
.box6 {
    padding: 57px 0 91px;
}
/*app-box*/
.app-box {
    display: block;
    width: 100%;
    float: left;
}
.app-title {
    display: block;
    width: 100%;
    float: left;   
    font: 600 14px/14px "Open Sans", sans-serif;   
    margin: 0 0 7px;   
}
.app-title span {
    display: block;
    font: 600 16px/16px "Open Sans", sans-serif;
    margin: 5px 0 0;
}
/*app-list*/
.app-list {
    display: block;
    width: 100%;
    float: left; 
    margin: 10px 0 0;   
}
.app-list li {
    padding: 0 0 0 27px;
    position: relative;
}
.app-list li span {
    display: block;
    font-weight: 600;
    margin: 0 0 10px;
}
.app-list li:before {
    content: "";
    display: block;
    position: absolute;
    background: url("../images/icon/sprite.png") no-repeat;
}
/*app-list-1*/
.app-list-1 li:before {
    background-position: -458px 0;
    width: 15px;
    height: 15px;
    left: 0;
    top: 3px;
}
/*app-list-2*/
.app-list-2 li {
    padding: 0 0 0 29px;
}
.app-list-2 li:before {
    background-position: -483px 0;
    width: 19px;
    height: 19px;
    left: 0;
    top: 1px;
}
/*box7*/
.box7 {
    background: #f7f7f4;
    padding: 57px 0 25px;
}
.box7:before {
    content: "";
    background: url("../images/grey-top.png") no-repeat top right;
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 5;
    left: 0;
    top: -40px;    
}
.box7 .section-title {
    margin: 0 0 59px;
}
/*project-box*/
.project-box {
    display: block;
    float: left;
    width: 100%;
    background: #fff;
    margin: 0 0 40px;
}
/*project-top*/
.project-top {
    display: block;
    float: left;
    width: 100%; 
    height: 150px;   
    padding: 30px 0 0 34px;
}
/*pr-1*/
.pr-1, .pr-2 {
    min-height: 530px;     
}
.pr-1, .pr-3 {
    -moz-border-radius: 30px 0 0 0;
    -webkit-border-radius: 30px 0 0 0;
    border-radius: 30px 0 0 0;    
}
.pr-1 .project-top {
    background: url("../images/pr-bg-1.jpg") no-repeat top center;
    -moz-border-radius: 30px 0 0 0;
    -webkit-border-radius: 30px 0 0 0;
    border-radius: 30px 0 0 0;    
}
.pr-1 .pr-title li:first-child {
    padding-right: 20px;
}
.pr-1 .pr-title li + li {
    padding-right: 16px;
    padding-left: 10px;
    left: 5px;
}
/*pr-2*/
.pr-2, .pr-4 {
    -moz-border-radius: 0 30px 0 0;
    -webkit-border-radius: 0 30px 0 0;
    border-radius: 0 30px 0 0;   
}
.pr-2 .project-top {
    background: url("../images/pr-bg-2.jpg") no-repeat top center;
    -moz-border-radius: 0 30px 0 0;
    -webkit-border-radius: 0 30px 0 0;
    border-radius: 0 30px 0 0;      
}
.pr-2 .pr-title li:first-child {
    padding-right: 13px;
}
.pr-2 .pr-title li + li {
    padding-right: 15px;
    padding-left: 15px;
}
/*pr-3*/
.pr-3, .pr-4 {
    min-height: 660px;     
}
.pr-3 .project-top {
    background: url("../images/pr-bg-3.jpg") no-repeat top center;
    -moz-border-radius: 30px 0 0 0;
    -webkit-border-radius: 30px 0 0 0;
    border-radius: 30px 0 0 0;      
}
.pr-3 .pr-title li:first-child {
    padding-right: 16px;
}
.pr-3 .pr-title li + li {
    padding-right: 10px;
    padding-left: 11px;
    left: 5px;
}
.pr-3 .project-txt .pr-list:first-child {
    margin-bottom: 32px;
}
/*pr-4*/
.pr-4 .project-top {
    background: url("../images/pr-bg-4.jpg") no-repeat top center;
    -moz-border-radius: 0 30px 0 0;
    -webkit-border-radius: 0 30px 0 0;
    border-radius: 0 30px 0 0;      
}
.pr-4 .pr-title li:first-child {
    padding-right: 9px;
}
.pr-4 .pr-title li + li {
    padding-right: 18px;
    padding-left: 21px;
    left: -5px;
}
.pr-3 .pr-list li, .pr-4 .pr-list li {
    margin: 0 0 10px;
}
/*pr-title*/
.pr-title {
    display: block;
}
.pr-title li {
    color: #000;
    font: 600 16px/16px "Open Sans", sans-serif;
    background-color: rgba(255,255,255,.9);   
    display: inline-block; 
    clear: both;
    float: left;
    height: 35px;
    padding-top: 10px;
    position: relative;
}
.pr-title li:first-child {
    padding-left: 16px;
    z-index: 1;
}
.pr-title li + li {
    top: -11px;
}
/*project-txt*/
.project-txt {
    display: block;
    width: 100%;
    float: left;
    padding: 32px 28px 0 41px;    
}
.project-txt p {
    margin: 0 0 8px;
}
/*pr-list*/
.pr-list {
    display: block;
    float: left;
    width: 100%;
}
.pr-list li {
    position: relative;
    padding: 0 0 0 23px;
    margin: 0 0 8px;
}
.pr-list li:before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    background: url("../images/icon/sprite.png") no-repeat -512px 0;
    width: 8px;
    height: 14px;
}
/*box8*/
.box8 {
    background: #f7f7f4;
    padding: 0 0 55px;
    text-align: center;
}
/*footer*/
footer {
    display: block;
    width: 100%;
    float: left;   
    position: relative; 
    background: url("../images/footer-bg.png") no-repeat top center #fff;
    padding: 0 0 52px;
}
/*f-logo*/
.f-logo {
    display: block;
    float: left;
    width: 100%;
    margin: 82px 0 0;
}
/*copy*/
.copy {
    display: block;
    float: left;
    width: 100%;
    color: #000;
    font: 12px/15px "Open Sans", sans-serif;       
    margin: -2px 0 0; 
}
/*dev*/
.dev {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    margin: 77px 0 0;
}
/*f-nav*/
.f-nav {
    margin: 17px 0 0;
}
.f-nav li a{
    color: #000;
}
/*f-phone*/
.f-phone {
    margin: 105px 0 0;
}
.f-phone li a, .f-phone li{
    color: #000;
}
.f-phone li a{
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.f-phone li span:before {
    background-position: 0 -24px;
}
/*banner--clone*/
.banner--clone {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
}
.banner--stick {
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
}
/*header-mini*/
.header-mini {
  display: block;
    float: left;
    margin: 0 0 -80px;
    position: relative;
    top: -80px;
    width: 100%;
}
.header-mini.banner--clone {
    position: fixed;
}
.header-mini.banner--stick {
    position: fixed;
    margin: 0;
    top: 0;
}
/*header-content*/
.header-content {
    margin: 0 auto;
    height: 69px;
    display: block;
    background-color: #fff;
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.09);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.09);
    box-shadow: 0 2px 2px rgba(0,0,0,.09);  
    max-width: 1320px;    
    position: relative; 
}
/*logo-mini*/
.logo-mini {
    display: block;
    margin: 7px 0 0 15px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/logo-mini.png") no-repeat;
    width: 189px;
    height: 53px;
}
.logo-mini3 {
    display: block;
    margin: 7px 0 0 222px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/logo-mini3.png") no-repeat;
    width: 53px;
    height: 53px;
}
.header-content .nav {
    margin: 24px 0 0;
    padding: 0;
}
.header-content .nav li a {
    color: #000;
}
.header-content .head-phone {
    margin: 10px 36px 0 0;
    display: inline-block;
    width: auto;
}
.header-content .head-phone li a, .header-content .head-phone li{
    color: #000;
}
.header-content .head-phone li a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.header-content .head-phone li a:hover {
    border: inherit;
}
.header-content .head-phone li span:before {
    background-position: 0 -24px;
}
.header-content .btn {
    width: 200px;
    height: 40px;
    float: left;
    margin: 14px 0 0 0;
    position: relative;
    right: 0;
    line-height: 40px;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);   
    -webkit-transition: transform 500ms ease 0s !important;
    -moz-transition: transform 500ms ease 0s !important;
    -o-transition: transform 500ms ease 0s !important;
    -ms-transition: transform 500ms ease 0s !important;
    transition: transform 500ms ease 0s !important;  	
}
/*hm-right*/
.hm-right {
    position: absolute;
    top: 0;
    right: 17px;
}
/*modal__content*/
.modal__content  {
    background: #fff;
    margin: 0 auto;
    max-width: 379px;
    position: relative;
    overflow: hidden;
}
/*modal__box*/
.modal__box {
    display: block;
    width: 100%;
    float: left;
    padding: 58px 51px 28px 50px;
}
/*modal-title*/
.modal-title {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    color: #000;
    font: 22px/30px 'Roboto Slab', serif;
    margin: 0 0 47px;
}
/*modal-block*/
.modal-block {
    display: block;
    width: 100%;
    float: left;
    margin: 0 0 13px;
}
.modal-block input {
    width: 100%;
    height: 35px;
    border: 1px solid #dbdbdb;
    background-color: #fff;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.13);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.13);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.13);
    display: block;
    float: left;
    font: 14px/14px "Open Sans", sans-serif;
    text-align: center;
}
.modal-block label {
    display: block;
    width: 100%;
    float: left;
    text-align: center;  
    color: #000;
    font: 600 14px/14px "Open Sans", sans-serif;   
    margin: 0 0 8px;
}
.modal-block .btn {
    margin: 14px auto 0;
    display: block;
    cursor: pointer;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);   
    -webkit-transition: transform 500ms ease 0s !important;
    -moz-transition: transform 500ms ease 0s !important;
    -o-transition: transform 500ms ease 0s !important;
    -ms-transition: transform 500ms ease 0s !important;
    transition: transform 500ms ease 0s !important;  
}
/*mfp-close*/
.modal__content .mfp-close {
    right: 0;
    top: 0;
}
.modal__content .mfp-close:before {
    content: "";
    display: block;
    background: url("../images/icon/sprite.png") no-repeat -530px 0;
    width: 13px;
    height: 13px;
    margin: 4px 0 0 11px;
}
.hidden-lg {
    display: none !important;
}

.form-success,
.form-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1047;
  background: #a83a3a;
  color: #fff;
  padding: 8px;
  display: none;
  text-align: center;
  min-height: 73px;
}
.form-success {
  background: #3aa844;   
}
.form-error {
   padding: 17px 8px 8px;
}
.error {
    border-color: #fc0000 !important;
}
@media (max-width: 1199px) {
    .box2 .swiper-button-next {
        right: 10px;    
    }
    .box2 .swiper-button-prev {
        left: 10px;
    }    
}
/*1099px*/
@media (max-width: 1099px) {
    .logo-mini {
        margin: 7px 0 0 7px;
    }
    .hm-right {
        right: 10px;
    }   
    .header-content .head-phone {
        margin: 10px 15px 0 0;
    }  
    .header-content .nav li a {
        padding: 0 5px;
    } 
    .header-content .nav {
        padding: 0 0 0 30px;
    }
}

/*1019px*/
@media (max-width: 1019px) {
    .logo-mini img {
        max-width: 100%;
    }   
    .logo-mini {
        background: url("../images/logo-mini.png") no-repeat;
        display: block;
        height: 53px;
        margin: 20px 0 0 15px;
        width: 189px;
    }
	.logo-mini3 {
        background: url("../images/logo-mini3.png") no-repeat;
        display: block;
        height: 53px;
        margin: 26px 0 0 222px;
        width: 53px;
    }   	
    .hm-right {
        top: 29px;
    }     
    .header-content .nav {
        float: right;
        margin: 8px 5px 0 0;
        padding: 0;
        width: auto;
    }    
    .header-content {
        height: 100px;
    }   
    .header-mini {
        top: -110px;  
        margin: 0 0 -100px;  
    }    
    
    
        
    .logo {
        padding: 0 0 0 5px;
    }
    .logo a img {
        max-width: 100%;
    }
	.logo2 {
        padding: 0 0 0 5px;
    }
    .logo2 a img {
        max-width: 100%;
    }
    .nav {
        padding: 0;
    }
    .head-phone {
        padding: 0 10px 0 0;
    }
    .slide-img img {
        max-width: 100%;
    }
    .st-1, .st-2, .st-4, .st-5 {
        width: 100%;
    }
    .slide1 .slide-img {
        margin: 4px 0 0;
    } 
    .box2 {
        padding: 96px 10px 52px;
    }   
    .st-3 {
        padding: 0 5px 0 0;
    }
    .st-1 {
        margin: 0 0 10px;
    }
    .st-1:before {
        background-size: contain;
        width: 118px;
        right: -125px;
    }    
    .st-3:before {
        background-size: contain;
        width: 35px;
        left: -44px;      
    }  
    .slide2 .slide-img {
        padding: 0;
        text-align: center;
    }
    .st-4:before {
        background-size: contain;
        width: 150px;
        right: -165px;
    }
    .st-5:before {
        background-size: contain;   
        width: 154px;
        right: -165px
    }
    .slide3 .slide-img {
        margin: 3px 0 0;
    }
    .st-3, .st-6 {
        width: 100%;
    }   
    .st-6::before {
        background-size: contain;
        width: 97px;
        left: -101px;
    } 
    .r-1 {
        margin: 50px 0 0 10px;
    }
    .box3 {
        background: #f3f3db;
    }
    .box3:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 204px;
        background: url("../images/city.png") no-repeat center top;
    }
    .r-2 {
        margin: 45px 0 0 65px;
    }   
    .r-2 .r-num:before {
        height: 130px;
    }   
    .r-1 .r-num:before {
        height: 191px;
    }      
    .r-3 .r-num:before {
        height: 237px;
    } 
    .r-4 {
        margin: 55px 0 0 90px;
    }  
    .r-4 .r-num:before {
        height: 214px;
    }  
    .r-5 {
        margin: 40px 0 0 -38px;
    }      
    .r-5 .r-num:before {
        height: 270px;
    }  
    .r-6 {
        margin: 75px 0 0 21px;
    } 
    .r-6 .r-num:before {
        height: 74px;
    }        
    .r-7 {
        margin: 110px 0 0 -25px;
    } 
    .r-7 .r-num:before {
        height: 135px;
    } 
    .f-box {
        padding: 0 10px 0 0;
    }  
    .format-txt p {
        padding-left: 10px;
    }   
    .format-img {
        padding-left: 10px;
    }    
    .w-8 {
        margin: 55px 0 0 60px;
    } 
    .work-content:before {
        width: 80%; 
        background-size: contain;
    }    
    .w-3 {
        margin: 55px 0 0 99px;
    }   
    .app-box {
        padding: 0 0 0 10px;
    }
    .app-box-2 {
        padding: 0 10px 0 0;
    }  
    .box7 {
        padding: 57px 10px 25px;
    }
    .project-txt {
        padding: 32px 20px 0;
    }
    footer {
        padding: 0 10px 52px;
    }
}/*END 1019px*/

/*959px*/
@media (max-width: 959px){
    .work-content:before {
        top: -142px;
    }
    .w-5 {
        margin: 50px 0 0 30px;
    }    
    .w-7 {
        margin: 49px 0 0 30px;
    }        
    .w-8 {
        margin: 55px 0 0 40px;
    } 
    .pr-1, .pr-2 {
        min-height: 600px;
    }  
    .pr-3, .pr-4 {
        min-height: 730px;
    }            
}/*END 959px*/

/*899px*/
@media (max-width: 899px) {
    .logo a img {
        max-width: 140%;
    }   
    .nav {
        padding: 0 0 0 10px;
        margin: 34px 0 0;
    }  
    .head-phone {
        margin: 37px 0 0;
    }   
    .issue-content > div p span {
        display: inline;
    }  
    .box1 {
        padding: 0 10px;
    }
    .st-1:before {
        right: -115px;
        width: 108px;
    }    
    .st-3:before {
        left: -35px;
        width: 30px;
    }
    .st-2:before {
        -webkit-transform: rotate(-48deg);
        -moz-transform: rotate(-48deg);
        -o-transform: rotate(-48deg);
        -ms-transform: rotate(-48deg);
        transform: rotate(-48deg); 
        right: -79px;
        top: -23px;                
    }  
    .st-4:before {
        background-size: contain;
        right: -125px;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        transform: rotate(10deg);                 
        width: 120px;
        top: 19px;
    }    
    .st-5:before {
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg);  
        top: -6px;   
        right: -165px;
    }  
    .r-2 {
        margin: 25px 0 0 55px;
    }   
    .r-3 .r-num:before {
        height: 257px;
    }    
    .r-4 {
        margin: 55px 0 0 65px;
    } 
    .r-6 {
        margin: 35px 0 0 5px;
    }     
    .r-7 {
        margin: 80px 0 0 -35px;
    }   
    .r-7 .r-num:before {
        height: 165px;
    }   
    .format-img img {
        max-width: 100%;
    } 
    .w-2 {
        margin: 15px 0 0 29px;
    }    
    .w-3 {
        margin: 35px 0 0 50px;
    } 
    .w-5 {
        margin: 30px 0 0 20px;
    } 
    .w-6 {
        margin: 0 0 0 -10px;
    }      
    .w-7 {
        margin: 19px 0 0 20px;
    }   
    .w-8 {
        margin: 30px 0 0 40px;
    }     
    .w-8 .w-txt {
        white-space: normal;
    }   
    .w-8 .w-img {
        margin-top: -5px;
    }  
    .pr-1, .pr-2 {
        min-height: 650px;
    }  
    .copy {
        white-space: nowrap;
    }   
    .f-nav {
        width: 120%;
        padding: 0;  
        margin: 46px 0 0 -30px;      
    }       
    .f-phone {
        margin: 105px 0 0;
    }  
}/*END 899px*/

/*767px*/
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
    .visible-xs {
        display: block !important;
    }
    .nav {
        margin: 0;
        text-align: center;
    }
    .nav li {
        float: none;
    }
    .head-center {
        margin: 74px 0 0;
    }
    .title span {
        display: inline;
    }
    .box3 {
        height: auto;
        padding: 56px 0 200px;
    }
    .reasons-box {
        margin: 0 auto  20px!important;
        width: 210px;
        float: none;
        clear: both;
        min-height: 60px;
    }
    .r-num:before {
        display: none;
    }
    .box4 {
        padding: 70px 10px 55px;
    }
    h3 {
        padding: 0 10px;
    }
    .format-img, .format-img, .f-box {
        padding: 0;
    }
    .box5 {
        background-size: cover;
        height: auto;
        padding: 96px 10px 80px;
    }    
    .work-content:before {
        display: none;
    }
    .work-box {
        width: 290px;
        float: none;
        margin: 0 auto 20px !important;
        overflow: hidden;
        padding: 10px 0 0 85px !important;
        clear: both;
    }
    .app-box, .app-box-2 {
        padding: 0;
    }
    .box6 {
        padding: 57px 10px 91px;
    } 
    .project-top, .project-box {
        background-size: cover !important;
        -moz-border-radius: 30px 30px 0 0 !important;
        -webkit-border-radius: 30px 30px 0 0 !important;
        border-radius: 30px 30px 0 0 !important;           
    }   
    .pr-1, .pr-2, .pr-3, .pr-4 {
        height: auto;
        min-height: 0;
    }
    .project-txt {
        padding-bottom: 20px;
    }
    .dev {
        margin: -100px 0 0;
    }
    .f-nav {
        width: 100%;
        margin: 20px 0 0;
    }
    .slide-img {
        text-align: center;
        margin: 0 0 10px !important;
    }
    .st-1, .st-2, .st-4, .st-5 {
        text-align: left;
    }
    .slide-txt {
        margin: 0 !important;
    }
    .slide-txt:before {
        display: none !important;
    }
    .box2 .swiper-button-next, .box2 .swiper-button-prev {
        top: 40%;    
    }  	
}/*END 767px*/

/*639px*/
@media (max-width: 639px) {
    .sub-title {
        font: 25px/25px "Roboto Slab",serif;
    }
    h1 {
        font: 45px/45px "Roboto Slab",serif;
    }
    .logo-mini {
        background: url("../images/logo-mini2.png") no-repeat;
        width: 63px;
        height: 53px;
        margin: 25px 0 0 5px;
        background-size: contain;
    }
	.logo-mini3 {
        background: url("../images/logo-mini3.png") no-repeat;
        width: 53px;
        height: 53px;
        margin: 25px 0 0 100px;
        background-size: contain;
    }
    .header-content .head-phone {
        margin: 10px 0 0;
    }
    .box2 .swiper-button-next, .box2 .swiper-button-prev {
        height: 24px;
    }	
}/*END 639px*/

/*479px*/
@media (max-width: 479px) {
    .header-mini {
        display: none;
    } 
    .head-top .col-sm-2.col-xs-4{
        width: 100%;
    } 
    .logo {
        margin: 0;
        text-align: center;
        padding: 0;
    }    
    .logo a img {
        max-width: 70%;
    }
	.logo2 {
        margin: 0;
        text-align: center;
        padding: 0;
    }    
    .logo2 a img {
        max-width: 70%;
    }
    .head-top .col-sm-3.col-xs-8{
        width: 100%;
    } 
    .head-phone {
        margin: 0 auto;
        padding: 0;
        float: none;
        width: 190px;
    }   
    .nav {
        padding: 0;
        margin: 10px 0 0;
    } 
    .nav li a {
        color: #000;
    } 
    .nav li {
        padding: 0 0 5px;
    }   
    .head-center {
        margin: 40px 0 0;
    }    
    .sub-title {
        font: 18px/18px "Roboto Slab",serif;
    }   
    h1 {
        font: 25px/25px "Roboto Slab",serif;
        margin: 0;
    }
    .modal__box {
        padding: 58px 30px 28px;
    }
    .issue-content .col-xs-6 {
        width: 100%;
        min-height: 0;
        margin-bottom: 20px;
    } 
    h2, h3, .section-title {
        font: 25px/25px "Roboto Slab",serif;
    } 
    h3 {
        margin: 0 0 25px;
    }
    .box2 {
        padding: 65px 10px 52px;
    } 
    .box3 {
        padding: 25px 0 200px;
    }            
    .box4 {
        padding: 10px 10px 55px;
    }  
    .section-title, .box5 .section-title, .box7 .section-title {
        margin: 0 0 25px;
    } 
    .box5 {
        padding: 45px 10px 80px;
    } 
    .box6 {
        padding: 5px 10px 70px;
    }  
    .box7 {
        padding: 5px 10px 25px;
    }   
    .pr-title li {
        font: 600 14px/14px "Open Sans",sans-serif;
    } 
    .pr-1 .project-top {
        padding: 30px 0 0 7px;
    }  
    footer .col-xs-6 {
        width: 100%;
    } 
    .f-logo {
        margin: 82px 0 0;
        text-align: center;
    }     
    .copy {
        text-align: center;
    }
    .dev {
        margin: 0;
    }  
    .f-phone {
        margin: 20px auto;
    }      
    .box2 .swiper-button-next, .box2 .swiper-button-prev {
        top: 25%;
    }  	
}/*END 479*/