@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400);
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: auto;
}
html, body {height: 100%;width:100%; margin: 0;  padding: 0;
	font-size:100%;line-height:1.5em;color:#666;text-decoration:none; background-color:#fff;   
	/*-webkit-overflow-scrolling: touch;*/
	font-family: Helvetica, Arial, Verdana, sans-serif; font-weight: 200; word-wrap: normal; 
transition: color 0.3s ease; -moz-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; 
}
h1,h2,h3,h4,h5,h6{ font-family:'Oswald', Helvetica, Arial, Verdana, sans-serif; font-weight: 200; color: #666; font-size:100%;line-height:1.2em;margin-bottom:0.25em; word-wrap: break-word; word-break: normal;   }
h4{font-size:1.25em;}
a{color:#333;text-decoration:none;-webkit-transition:color 0.3s;-moz-transition:color 0.3s;-o-transition:color 0.3s;transition:color 0.3s;}
a:hover, a:active, a:focus{color:#000;text-decoration:none;outline:none;}
img {max-width: 100%; height: auto;	vertical-align: bottom;}
a img {	border: none;}
.wrapper { width: 100%;  max-width:1024px;  margin:0 auto; vertical-align:top;font-family: Helvetica, Arial, Verdana, sans-serif; }
#content {margin:88px auto auto auto; display:block; position:relative; z-index:1; transition: all ease-out 0.3s;}
.caption{ margin:8% auto 0px auto; display: block; vertical-align:top; text-align:left;font-family:'Oswald', Helvetica, Arial, Verdana, sans-serif; font-weight: 200; color: #666; font-size:100%;line-height:1.5em;margin-bottom:0.25em; word-wrap: break-word; word-break: normal;   }
.index{width:100%; height:534px;}
.index .title{ margin:10% auto 2% auto; display:block; font-size:3.2em; font-weight:600; color:#000; text-align:left; vertical-align: middle; line-height:1.5em;}
.index .title2{margin:10% auto .25em 0px; font-size:3.2em; font-weight:600; color:#000; text-align:left;text-shadow:0px 1px 1px rgba(255,255,255,1); vertical-align: middle; line-height:1.5em; }

.banner-1 .title2{display:block; margin:1% 0 auto auto; font-size:2.5em; font-weight:400; color: #666;text-align:left; line-height:1.5em;  }
.banner-1 .title2{ color:#920783; line-height:1.5em;}
.index .title3{display:block; margin:1% 0 auto auto; font-size:2.5em; font-weight:400;line-height:1.2em !important; color:#920783;text-align:left; }
.index .title4{display:block; margin:1% 0 auto auto; font-size:2em; font-weight:400; color:#920783;text-align:left; line-height:1.35em;}
.index p{font-size:1em; margin-top:2%; text-align: left; width:60%; color:#393f48; font-family: Helvetica, Arial, Verdana, sans-serif;}
.banner-3 .caption,.banner-4 .caption{ margin:10% auto 0px auto; }
.banner-5 .caption{ margin:22% auto 0px 43%; }
.banner-6 .caption{ margin:10% auto 0px 33%; }
.banner-7 .caption{ margin:40% auto 0px 22%; }

.banner-1{ width:100%; height:534px; background: url(../images/index/banner-3.jpg) no-repeat center top; background-size: cover;  }
.banner-2{ width:100%; height:534px; background: url(../images/index/banner-01.jpg) no-repeat center top; background-size: cover;  }
.banner-3{ width:100%; height:534px; background: url(../images/index/banner-4.jpg) no-repeat center top; background-size: cover;  }
.banner-4{ width:100%; height:534px; background: url(../images/index/banner-5.jpg) no-repeat center top; background-size: cover;  }
.banner-5{ width:100%; height:534px; background: url(../images/index/banner-6.jpg) no-repeat center top; background-size: cover;  }
.banner-6{ width:100%; height:534px; background-image: url(../images/index/b-6-l.png), url(../images/index/b-6-r.png),url(../images/index/banner-7.jpg);
background-repeat: no-repeat; background-position: left top, right bottom, center top;  background-size:auto,auto,cover;  }
.banner-7{ width:100%; height:534px; background: url(../images/index/banner-8.jpg) no-repeat center top; background-size: cover;  }
.banner-2 h2{ margin:10% auto 2% auto; font-size:3.2em; font-weight:600; color:#000; text-align:left; vertical-align: middle;}
.swiper-container { width: 100%; height: 100%; }
.swiper-slide {text-align: center;
        /* 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;
}

.about-wrap{ width:100%; height:300px; margin:auto; display:block; 
background: #d1e3f0; /* Old browsers */
background: -moz-linear-gradient(top,  #cedee8 2%, #b0cbd9 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #cbdce8 2%,#b0cbd9 50%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom,  #cbdce8 2%,#b0cbd9 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbdce8', endColorstr='#b0cbd9',GradientType=0 ); /* IE6-9 */
}
.about-block{ width:100%; height:300px; margin:auto; display:block;  padding:30px 1% 20px 40%; background: url(../images/index/brand.png) no-repeat 15px 15px;}
.about-block p{ width:100%; margin:0px auto; color:#fff; line-height:1.4em;}
.about-block h1 {width:100%; margin:1% auto; color:#34495e; font-size:1.65em; font-weight:300; line-height:1.4em;}
.about-service{ width:100%; padding:4% 0px; display:block; vertical-align:top; background:#f5f5f5; }
.about-service h3{display:block; padding-bottom:1%; font-size: 3.2em; font-weight:400;color:#920783; text-align: center; background: url(../images/line-gray.jpg) no-repeat center bottom;}
.about-service h4{width:70%; margin:3% auto; text-align: center; color: #333;}
.about-service p{ width:70% !important; margin:1% auto; display: block;  text-align: center;  font-size:1em; color:#34495e; }
.about-service span strong{ font-size:1.85em; color:#c69f70; font-style:italic;}
.about-service ul{ width:100%; display: block; margin:5% auto;} 
.about-service ul li{ width:17.5%; display: inline-block; margin:1%; padding-top:80px;  vertical-align:top; text-align: center;}
.about-service ul li:nth-child(1){ background: url(../images/index/icon-02.png) no-repeat center top;}
.about-service ul li:nth-child(2){ background: url(../images/index/icon-05.png) no-repeat center top;}
.about-service ul li:nth-child(3){ background: url(../images/index/icon-04.png) no-repeat center top;}
.about-service ul li:nth-child(4){ background: url(../images/index/icon-06.png) no-repeat center top;}
.about-service ul li:nth-child(5){ background: url(../images/index/icon-01.png) no-repeat center top;}

.about-service ul li span{width:100%; display:block; line-height:1.65em;}
.about-service ul li span:nth-child(1){ font-size:1em; color:rgba(146,7,131,1); font-weight:600; margin:1% auto; text-align: center;}
.about-service ul li span:nth-child(2){width:100%; font-size:.9em; color:#34495e; text-align: center; min-height:100px;}
.button {display: inline-block; cursor: pointer; margin: 0 2px; padding:1em;	outline: medium none;	font-size: 15px;text-align: center;	text-decoration: none;	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);border-radius:.2em;	vertical-align: baseline;}
.button:hover {	text-decoration: none;}
.button:active { position: relative;	top: 1px;}
.button:focus, .button:active:focus, .button.active:focus {	outline: 0 none;}
.bigrounded { border-radius: 2em;}
.medium { padding: 2% 10%;	border-radius: 2em;}
.small { border-radius: 2em;	font-size: 11px;}
.rosy {	background: #f16c7c;	border: 1px solid #f16c7c;	color: #fae7e9;}
.rosy:hover { background: #a53845;}
.rosy:active { background: #bf404f;	color: #dca4ab;}
.white { color: #f05b0f;	background: #ededed; border: 1px solid #b7b7b7;}
.white:hover { background: #dcdcdc;}
.white:active { background: #ededed; color: #999;}
.red { background: #aa1317;	border: 1px solid #980c10;	color: #fff;}
.red:hover { background: #c9151b; color: #fff;}
.red:active { background: #ed1c24; color: #fff;}
.pink {margin: 0 4px 0 0;  padding:5px 14px; font-size: 11px; color: #fff;  border-radius: 2em;background:rgba(146,7,131,1) none repeat scroll 0 0;}
.pink:hover { background:#999;    none repeat scroll 0 0; }
.pink:active { background: #6c354b none repeat scroll 0 0; color: #f3c3d9;}
.purple {margin:1% 8px;   font-size:.9em; color:#fff; border-radius:2em; background: url(../images/arrow-b-w.png) no-repeat right 6px rgba(0,0,0,.2); background-size:30px; padding:10px 36px 10px 20px; }
.purple:hover { }
.purple:active { background: #6c354b none repeat scroll 0 0; color: #f3c3d9;}
.gray {margin: 0 20px 0 0;   font-size: 1em;  color: #fff; border-radius:2em; background: url(../images/arrow-b-up.png) no-repeat right 6px #393f48; background-size:30px; padding:10px 36px 10px 20px; text-shadow: 0px 1px rgba(51,51,51,1);}
.gray:hover { background-color: #666;}
.gray:active { background: #6c354b none repeat scroll 0 0; color: #f3c3d9;}
/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(255,153,0,1);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; border-radius:2em;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active { color: white;}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
@media screen and (max-width:1366px) {
.index{width:100%; height:420px !important;}
.index .title,.banner-2 .title2{ margin:5% auto 2% auto;}
.caption{ margin:10% auto 15% auto!important;}
.banner-1{ width:100%; height:420px !important; background-position: right top;  background-size: cover;  }
.banner-2,.banner-3,.banner-4,.banner-5,.banner-7{ width:100%; height:420px !important;  background-size: cover;  }
.banner-3 .caption,.banner-4 .caption{ margin:10% auto 0px auto; }
.banner-5 .caption{ margin:15% auto 0px 43%!important; }
.banner-6 .caption{ margin:15% auto 0px 30%!important; }
.banner-7 .caption{ margin:32% auto 0px 22%!important; }


}
@media screen and (max-width:1280px) {
.caption{ margin:5% auto 15% 2%!important; }
.banner-6{ background-position:-140px top, right bottom, center top !important; }

}
@media screen and (max-width:1024px) {
#content {margin:88px auto 0px auto; width:100%;}
.wrapper { width:98%; margin:0 1%;}
.banner-6{ background-position:-180px top, right bottom, center top !important; }

}
@media screen and (max-width:768px) {
.index{margin:6% auto 0 auto; width:100%; height:380px;display:block;}
.banner-1,.banner-2,.banner-3,.banner-4{ width:100%;height:380px;  background-size: cover;  }
.banner-6{ background-position:-180px top, right bottom, center top !important;background-size:60% auto,60% auto, cover; }
.caption { margin:13% auto 0px 6% !important; font-size:90%;}
.banner-5 .caption{ margin:25% auto 0px 43%!important; }
.banner-6 .caption{ margin:20% auto 0px 34%!important; }
.banner-7 .caption{ margin:42% auto 0px 12%!important; }
.caption p{ line-height:1.45em;}




.about-wrap{  height:auto!important; }
.about-block{ height:auto!important; display: block; padding-left:36%; background: url(../images/index/brand.png) no-repeat 15px 60px; background-size:30%;}
.about-block h1 {font-size:1.3em;}
.about-service { padding:4% 0px;}
.about-service ul li{ width:42%; margin:3%; text-align: center!important;}
.about-service ul li span:nth-child(2){min-height:60px;}
.about-service h4,.about-service p{ width:100% !important;}

}
@media screen and (max-width:640px) {
.index{margin:6% auto 0 auto; width:100%; height:640px;display:block;}
.index p{ width:90%; text-shadow:1px 1px rgba(255,255,255,.5);}
.banner-1,.banner-2{ width:100%;height:640px;  background-size: cover;  }
.banner-1{ width:100%; background: url(../images/index/m-banner-02.jpg) no-repeat center top; background-size:cover;  }
.banner-2{ width:100%; background: url(../images/index/m-banner-01.jpg) no-repeat center top; background-size:cover;  }
.banner-3{ width:100%; background: url(../images/index/m-banner-03.jpg) no-repeat center top; background-size:cover;  }
.banner-4{ width:100%; background: url(../images/index/m-banner-04.jpg) no-repeat center top; background-size:cover;  }
.banner-5{ width:100%; background: url(../images/index/m-banner-05.jpg) no-repeat center top; background-size:cover;  }

.banner-6{ background-position:-50px top, right bottom, right top !important;  background-size:80% auto,100% auto,cover;  }
.banner-7{ width:100%; background: url(../images/index/m-banner-07.jpg) no-repeat center top; background-size:cover;  }

.banner-3 .caption,.banner-4 .caption{ margin:25% auto 0px 13%!important; }
.banner-5 .caption{ margin:45% auto 0px 30%!important; }
.banner-6 .caption{margin:40% auto 0px 13%!important;}
.banner-7 .caption{margin:75% auto 0px 13%!important;}

.caption { margin:45% auto 0px 10%;}
.about-wrap{  height:auto; text-align:center; font-size:90%; }
.about-block{ padding: 200px 2% 20px 2%; background: url(../images/index/brand.png) no-repeat  center 5%; background-size:90%;}
.about-service{font-size:80%; line-height:1.5em;}
.about-service h4{ margin:5% auto;}
.about-service ul li{ width:90%; margin:3% auto; display: block;}
}
@media screen and (max-width:568px) {
	.index,.banner-1,.banner-2{ height:480px;}

}