/*--
	Author: W3layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
--*/
html,body{
	margin:0;
	padding:0;
	background:#fff;
	font-family: 'Source Sans Pro', sans-serif;
	overflow-x:hidden;
	width:100%;
	max-width:100%;
 }
body a{
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
h1,h2,h3,h4,h5,h6{
	margin:0;			   
}	
p{
	margin:0;
}
ul{
margin:0;
padding:0;
}
/*----*/
.banner{
background:url(../images/bg.jpg) no-repeat 0px 0px;
min-height:657px;
background-size:cover;
}
.header{
padding-top:3em;
}
.logo{
float:left;
}
.top-menu{
float:right;
}
.top-menu ul li{
display:inline-block;
border-bottom:2px solid #16151b;
}
.top-menu ul li a{
color:#fff;
font-size:1.15em;
padding:0 2px 10px 2px;
display:block;
text-decoration:none;
margin:0 0.5em;
}
.top-menu ul li a:hover,.top-menu ul li.active a{
border-bottom:2px solid #008ed6;
}
.top-menu ul li a:hover{
color:#008ed6;
}
.banner-info{
margin-top:5%;
}
.banner-pic{
text-align:right;
}
.banner-text{
padding-left:0;
margin-top:6%;
}
.banner-text h3{
font-size:1em;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:#008ed6;
margin-bottom:1.2em;
}
.banner-text h1{
font-size:3.4em;
font-weight:600;
color:#fff;
margin-bottom:0.5em;
}
.banner-text h1 .banner-title-main,
.banner-text h1 .banner-title-sub{
display:block;
}
.banner-ship-track{
position:relative;
display:block;
width:100%;
max-width:460px;
height:120px;
margin:0.35em 0 0.25em;
overflow:hidden;
}
.banner-ship-trail{
position:absolute;
left:118px;
right:0;
top:50%;
height:2px;
margin-top:-1px;
background:-webkit-linear-gradient(left,transparent 0%,rgba(0,170,220,0.55) 12%,rgba(0,170,220,0.28) 50%,rgba(0,170,220,0.45) 88%,transparent 100%);
background:linear-gradient(90deg,transparent 0%,rgba(0,170,220,0.55) 12%,rgba(0,170,220,0.28) 50%,rgba(0,170,220,0.45) 88%,transparent 100%);
box-shadow:0 0 6px rgba(0,190,255,0.35);
pointer-events:none;
z-index:0;
overflow:hidden;
}
.banner-ship-trail:before{
content:"";
position:absolute;
top:-5px;
left:-35%;
width:36%;
height:12px;
background:-webkit-linear-gradient(left,transparent 0%,rgba(0,210,255,0.2) 18%,rgba(0,220,255,0.95) 42%,rgba(255,255,255,1) 50%,rgba(0,220,255,0.95) 58%,rgba(0,210,255,0.2) 82%,transparent 100%);
background:linear-gradient(90deg,transparent 0%,rgba(0,210,255,0.2) 18%,rgba(0,220,255,0.95) 42%,rgba(255,255,255,1) 50%,rgba(0,220,255,0.95) 58%,rgba(0,210,255,0.2) 82%,transparent 100%);
-webkit-box-shadow:0 0 14px 2px rgba(0,200,255,0.55);
box-shadow:0 0 14px 2px rgba(0,200,255,0.55);
-webkit-clip-path:polygon(0% 50%,18% 0%,82% 0%,100% 50%,82% 100%,18% 100%);
clip-path:polygon(0% 50%,18% 0%,82% 0%,100% 50%,82% 100%,18% 100%);
-webkit-animation:shipLightWave 2.4s ease-in-out infinite;
animation:shipLightWave 2.4s ease-in-out infinite;
}
.banner-ship-trail:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:-webkit-linear-gradient(left,transparent,rgba(0,190,255,0.35) 15%,rgba(0,190,255,0.12) 55%,transparent 100%);
background:linear-gradient(90deg,transparent,rgba(0,190,255,0.35) 15%,rgba(0,190,255,0.12) 55%,transparent 100%);
opacity:0.75;
}
.banner-ship-track .banner-ship,
.banner-text h1 .banner-ship{
position:absolute;
left:0;
top:50%;
display:block;
width:150px;
height:auto;
margin:-48px 0 0 0;
z-index:1;
-webkit-filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4));
filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4));
-webkit-animation:shipBob 0.7s ease-in-out infinite alternate;
animation:shipBob 0.7s ease-in-out infinite alternate;
}
@-webkit-keyframes shipLightWave{
0%{-webkit-transform:translateX(0);opacity:0.35;}
20%{opacity:1;}
100%{-webkit-transform:translateX(380%);opacity:0.35;}
}
@keyframes shipLightWave{
0%{transform:translateX(0);opacity:0.35;}
20%{opacity:1;}
100%{transform:translateX(380%);opacity:0.35;}
}
@-webkit-keyframes shipBob{
0%{-webkit-transform:translateY(0) rotate(-1.5deg);}
100%{-webkit-transform:translateY(-3px) rotate(1.5deg);}
}
@keyframes shipBob{
0%{transform:translateY(0) rotate(-1.5deg);}
100%{transform:translateY(-3px) rotate(1.5deg);}
}
@media (max-width:768px){
.banner-ship-track{height:100px;max-width:360px;}
.banner-ship-trail{left:95px;}
.banner-ship-track .banner-ship,
.banner-text h1 .banner-ship{width:120px;margin-top:-40px;}
}
@media (max-width:480px){
.banner-ship-track{height:88px;max-width:280px;}
.banner-ship-trail{left:80px;}
.banner-ship-track .banner-ship,
.banner-text h1 .banner-ship{width:100px;margin-top:-34px;}
}
.banner-text h1 .banner-title-sub{
font-size:0.72em;
font-weight:500;
line-height:1.35;
margin-top:0.12em;
}
.banner-text p{
font-size:1.3em;
color:#999999;
line-height:1.5em;
margin-bottom:2em;
width:88%;
}
a.download{
background:#008ed6;
color:#fff;
font-size:1.2em;
display:inline-block;
text-decoration:none;
margin-right:1em;
margin-bottom:0.8em;
padding: 15px 2.2em 18px 2.2em;
border-radius:3px;
border:1px solid #008ed6;
font-weight:600;
}
a.download:hover{
background:transparent;
border:1px solid #999999;
}
a.view{
background:transparent;
color:#fff;
font-size:1em;
border:1px solid #999999;
display:inline-block;
text-decoration:none;
margin-right:1em;
padding:14px 2em;
border-radius:3px;
font-weight:600;
}
/* Bounce To Left */
.hvr-bounce-to-left {
  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-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #008ed6;
  border:none;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 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;
}
.hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active {
  color: white;
}
.hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left: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);
}
/*----*/
.features{
padding:4% 0;
border-bottom:1px solid #eeeeee;
}
.features-head{
text-align:center;
}
.features-head h4{
font-size: 1em;
font-weight: 700;
letter-spacing: 1px;
color: #008ed6;
margin-bottom: 0.7em;
}
.features-head h3{
font-size: 2.7em;
font-weight: 600;
color: #1a1a1a;
padding-bottom: 0.7em;
background: url(../images/line.png) no-repeat 50% 100%;
}
.features-section{
margin-top:4em;
}
.feature-grid {
text-align:center;
}
.feature-grid img{
margin-bottom:1em;
}
.feature-grid h3{
color:#1a1a1a;
font-size:1.9em;
margin-bottom:0.5em;
font-weight:500;
}
.feature-grid p{
color:#aeadad;
font-size:1.3em;
line-height:1.5em;
font-weight:400;
}
/*--APP download cards--*/
.download-section{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-justify-content:center;
justify-content:center;
max-width:920px;
margin:1.2em auto 0 auto !important;
padding:0 10px;
box-sizing:border-box;
gap:0;
}
.download-section .clearfix{
display:none;
}
a.download-card,
a.download-card:link,
a.download-card:visited,
a.download-card:hover,
a.download-card:active,
a.download-card:focus{
position:relative;
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-orient:vertical;
-webkit-flex-direction:column;
flex-direction:column;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
justify-content:center;
overflow:hidden;
width:46%;
max-width:420px;
min-height:168px;
margin:0 2% 18px 2%;
padding:28px 20px 24px;
box-sizing:border-box;
border-radius:22px;
text-decoration:none !important;
text-align:center;
color:#1a1a1a !important;
border:1px solid rgba(255,255,255,0.55);
box-shadow:0 8px 24px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
-webkit-transition:box-shadow 0.35s ease, -webkit-transform 0.35s ease, border-color 0.35s ease;
transition:box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
will-change:transform;
}
a.download-card:before{
content:"";
position:absolute;
top:-40%;
right:-20%;
width:160px;
height:160px;
border-radius:50%;
background:rgba(255,255,255,0.28);
pointer-events:none;
}
a.download-card:after{
content:"立即下载 →";
display:inline-block;
margin-top:12px;
padding:6px 14px;
border-radius:999px;
font-size:0.78em;
font-weight:700;
letter-spacing:0.4px;
background:rgba(255,255,255,0.55);
color:rgba(26,26,26,0.72);
-webkit-transition:background 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
a.download-card-android,
a.download-card-android:link,
a.download-card-android:visited,
a.download-card-android:hover,
a.download-card-android:active,
a.download-card-android:focus{
background:-webkit-linear-gradient(315deg,#e4efef 0%,#bdd1d1 48%,#9fbcbc 100%);
background:linear-gradient(135deg,#e4efef 0%,#bdd1d1 48%,#9fbcbc 100%);
color:#1a1a1a !important;
}
a.download-card-android h3,
a.download-card-android:hover h3,
a.download-card-android:focus h3{
color:#163b3b !important;
}
a.download-card-android p{
color:#3A5555 !important;
}
a.download-card-android:after{
color:#0f5c5c;
}
a.download-card-ios,
a.download-card-ios:link,
a.download-card-ios:visited,
a.download-card-ios:hover,
a.download-card-ios:active,
a.download-card-ios:focus{
background:-webkit-linear-gradient(315deg,#e8f0e4 0%,#c5d5c0 48%,#a8c0a0 100%);
background:linear-gradient(135deg,#e8f0e4 0%,#c5d5c0 48%,#a8c0a0 100%);
color:#1a1a1a !important;
}
a.download-card-ios:hover h3,
a.download-card-ios:focus h3,
a.download-card-ios h3{
color:#2F4A3A !important;
}
a.download-card-ios p{
color:#2F4A3A !important;
}
a.download-card-ios:after{
color:#2F4A3A;
}
a.download-card-mac,
a.download-card-mac:link,
a.download-card-mac:visited,
a.download-card-mac:hover,
a.download-card-mac:active,
a.download-card-mac:focus{
background:-webkit-linear-gradient(315deg,#f6ebe1 0%,#e8d5c4 48%,#d4b89f 100%);
background:linear-gradient(135deg,#f6ebe1 0%,#e8d5c4 48%,#d4b89f 100%);
color:#1a1a1a !important;
}
a.download-card-mac:hover h3,
a.download-card-mac:focus h3,
a.download-card-mac h3{
color:#5C4033 !important;
}
a.download-card-mac p{
color:#5C4033 !important;
}
a.download-card-mac:after{
color:#5C4033;
}
a.download-card-win,
a.download-card-win:link,
a.download-card-win:visited,
a.download-card-win:hover,
a.download-card-win:active,
a.download-card-win:focus{
background:-webkit-linear-gradient(315deg,#e8eef5 0%,#d2dee8 48%,#b4c7d8 100%);
background:linear-gradient(135deg,#e8eef5 0%,#d2dee8 48%,#b4c7d8 100%);
color:#1a1a1a !important;
}
a.download-card-win:hover h3,
a.download-card-win:focus h3,
a.download-card-win h3{
color:#2B5A8A !important;
}
a.download-card-win p{
color:#2B5A8A !important;
}
a.download-card-win:after{
color:#2B5A8A;
}
a.download-card:hover,
a.download-card:focus{
box-shadow:0 16px 36px rgba(16,24,40,0.16), inset 0 1px 0 rgba(255,255,255,0.75);
-webkit-transform:translateY(-7px);
transform:translateY(-7px);
border-color:rgba(255,255,255,0.85);
}
a.download-card:hover:after,
a.download-card:focus:after{
background:rgba(255,255,255,0.88);
-webkit-transform:translateY(-1px);
transform:translateY(-1px);
}
a.download-card:hover .download-icon,
a.download-card:focus .download-icon{
-webkit-transform:scale(1.08) translateY(-2px);
transform:scale(1.08) translateY(-2px);
box-shadow:0 8px 18px rgba(16,24,40,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
.download-icon{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
justify-content:center;
width:68px;
height:68px;
margin-bottom:12px;
border-radius:20px;
background:rgba(255,255,255,0.62);
box-shadow:0 4px 14px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
line-height:0;
position:relative;
z-index:1;
-webkit-transition:-webkit-transform 0.35s ease, box-shadow 0.35s ease;
transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.download-icon svg{
display:block;
margin:0 auto;
width:34px;
height:34px;
}
a.download-card h3{
position:relative;
z-index:1;
color:#1a1a1a !important;
font-size:1.45em;
margin:0 0 6px 0;
font-weight:800;
letter-spacing:-0.02em;
-webkit-transition:color 0.3s ease;
transition:color 0.3s ease;
}
a.download-card p{
position:relative;
z-index:1;
color:#333333 !important;
font-size:0.9em;
line-height:1.4;
font-weight:500;
margin:0;
opacity:0.92;
}
@media (max-width:640px){
a.download-card,
a.download-card:link,
a.download-card:visited{
width:46%;
min-height:148px;
margin:0 2% 12px 2%;
padding:18px 10px 16px;
border-radius:16px;
}
a.download-card h3{
font-size:1.1em;
}
a.download-card p{
font-size:0.72em;
}
a.download-card:after{
font-size:0.68em;
margin-top:8px;
padding:4px 10px;
}
.download-icon{
width:52px;
height:52px;
margin-bottom:8px;
border-radius:14px;
}
.download-icon svg{
width:26px;
height:26px;
}
}
/*--about--*/
.about{
padding:4% 0;
}
.about-device-info{
text-align:left;
padding-top:5em;
}
.device-text h4{
font-size: 1em;
font-weight: 700;
letter-spacing: 1px;
color: #008ed6;
margin-bottom: 0.7em;
}
.device-text h3{
font-size: 2.7em;
font-weight: 600;
color: #1a1a1a;
padding-bottom: 0.7em;
background: url(../images/line.png) no-repeat 0% 100%;
}
.device-text p{
color:#aeadad;
font-size:1.3em;
line-height:1.5em;
font-weight:400;
margin-top:1em;
width:90%;
}
.about-list{
margin-top:2em;
}
.about-list ul li{
display:block;
}
.about-list ul li {
list-style-type: none;
margin-bottom: 0.5em;
}
.about-list ul li a {
text-decoration: none;
color: #1a1a1a;
font-size:1.25em;
font-weight:600;
}
.about-list ul li a span {
background: url(../images/icons1.png) no-repeat;
width: 20px;
height: 18px;
display: inline-block;
vertical-align: middle;
margin-right: 13px;
}
.about-list ul li a span.abt1{
background-position:-7px -12px;
}
.about-list ul li a span.abt2{
background-position:-7px -37px;
}
.about-list ul li a span.abt3{
background-position:-7px -69px;
}
.about-list ul li a span.abt4{
background-position:-7px -97px;
}
.about-bottom-points{
list-style:none;
margin:1.6em 0 0;
padding:0;
}
.about-bottom-points > li{
list-style:none;
margin:0 0 1em;
}
.about-bottom-points > li > a{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:flex-start;
-webkit-align-items:flex-start;
align-items:flex-start;
text-decoration:none;
color:#1a1a1a;
font-size:1.15em;
font-weight:600;
line-height:1.45;
cursor:default;
}
.about-bottom-points .abt-ico{
-webkit-flex:0 0 34px;
flex:0 0 34px;
width:34px;
height:34px;
margin:0 12px 0 0;
border-radius:10px;
background-color:#e7f7f2;
background-repeat:no-repeat;
background-position:center;
background-size:18px;
display:inline-block;
}
.about-bottom-points .abt-ico-globe{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307796a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.8 3.8 5.8 3.8 9s-1.3 6.2-3.8 9c-2.5-2.8-3.8-5.8-3.8-9S9.5 5.8 12 3z'/%3E%3C/svg%3E");
}
.about-bottom-points .abt-ico-bolt{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307796a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 10-13h-7l1-7z'/%3E%3C/svg%3E");
}
.about-bottom-points .abt-ico-shield{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307796a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.4 8.4-8 9-4.6-.6-8-4-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
/*-----*/
.about-bottom{
background:#f2f2f2;
padding:3% 0;
}
.device-text-bottom{
text-align:left;
padding-top:5em;
}
.about-customize {
width:45%;
}
.device-text-bottom h4{
font-size: 1em;
font-weight: 700;
letter-spacing: 1px;
color: #008ed6;
margin-bottom: 0.7em;
}
.device-text-bottom h3{
font-size: 2.7em;
font-weight: 600;
color: #1a1a1a;
padding-bottom: 0.7em;
background: url(../images/line.png) no-repeat 0% 100%;
}
.device-text-bottom p{
color:#aeadad;
font-size:1.3em;
line-height:1.5em;
font-weight:400;
margin-top:1em;
width:100%;
}
.about-device-bottom{
}
.about-device-bottom img{
display:block;
width:100%;
height:auto;
border-radius:20px;
overflow:hidden;
}
/*--pricing--*/
.pricing{
background:url(../images/price.jpg) no-repeat;
min-height:660px;
background-size:cover;
padding:5% 0;
}
.pricing-text{
text-align:center;
}
.pricing-text h4{
font-size: 1em;
font-weight: 700;
letter-spacing: 1px;
color: #008ed6;
margin-bottom: 0.5em;
}
.pricing-text h3{
font-size: 2.7em;
font-weight: 600;
color: #fff;
padding-bottom: 0.7em;
background: url(../images/line.png) no-repeat 50% 100%;
}
/*--- slider-css --*/
.slider{
	position:relative;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
.rslides_tabs{
	background: none !important;
	border: none;
	box-shadow: none;
	position: relative;
	top: -90px;
	z-index: 999;
}
.callbacks_tabs a:after {
	content: "\f111";
	font-size: 0;
	font-family: FontAwesome;
	visibility: visible;
	display: block;
	height: 8px;
	width: 8px;
	display: inline-block;
	border: 2px solid #747474;
	border-radius:50%;
	background:transparent;
	margin-left:1em;
}
.callbacks_here a:after{
	border: 5px solid #FFF;
	background: #fff;
  width: 14px;
  height: 14px;
}
.callbacks_tabs a{
	visibility:hidden;
}
.callbacks_tabs li{
	display:inline-block;
	margin-left:0.7em;
}
ul.callbacks_tabs.callbacks1_tabs {
	position: absolute;
	bottom: -88%;
	  z-index: 999;
	  left: 44%;
}
.pricing-grids{
margin:5% 0;
}
.pricing-plans p{
color:#fff;
font-style:italic;
font-size:1.7em;
font-weight:300;
margin-bottom:1em;
width: 95%;
}
.pic1{
float:left;
width:10%;
}
.pic1 img{
border-radius:50%;
}
.pic-info{
float:left;
width:85%;
margin-left:5%;
padding-top:0.5em;
}
.pic-info h5{
font-weight:300;
color:#fff;
font-size: 1.15em;
margin-bottom: 5px;
}
.pic-info a{
font-weight:600;
display:inline-block;
text-decoration:none;
color:#fff;
font-size:1em;
}
.theme{
background:#15141a;
padding:4em 0;
}
.theme h3 span{
color:#fff;
font-weight:600;
}
.theme h3{
color:#fff;
font-size:2.4em;
font-weight:100;
display:inline-block;
margin-right:4em;
}
/*----*/
.pricing-bottom{
padding:3% 0;
background:#eef1f4;
}
.pricing-text-bottom{
text-align:center;
}
.pricing-text-bottom h4{
font-size: 1em;
font-weight: 700;
letter-spacing: 1px;
color: #008567;
margin-bottom: 0.5em;
}
.pricing-text-bottom h3{
font-size: 2.7em;
font-weight: 600;
color: #15141a;
padding-bottom: 0.5em;
background: url(../images/line.png) no-repeat 50% 100%;
}
/* ExpressVPN-inspired plan cards */
.plan-cards{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-justify-content:center;
justify-content:center;
-webkit-box-align:end;
-webkit-align-items:flex-end;
align-items:flex-end;
gap:20px;
margin:2.5em auto 1em;
max-width:1120px;
padding:48px 10px 0;
box-sizing:border-box;
}
.plan-wrap{
width:calc(25% - 15px);
min-width:210px;
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
flex-direction:column;
box-sizing:border-box;
-webkit-transition:-webkit-transform 0.3s ease, box-shadow 0.3s ease;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.plan-wrap:hover{
-webkit-transform:translateY(-4px);
transform:translateY(-4px);
}
.plan-card{
position:relative;
width:100%;
background:#fff;
border:1px solid #d7dee5;
border-radius:16px;
padding:32px 22px 24px;
box-sizing:border-box;
text-align:left;
box-shadow:0 1px 3px rgba(16,24,40,0.06),0 8px 20px rgba(16,24,40,0.04);
}
.plan-wrap:hover .plan-card{
box-shadow:0 10px 28px rgba(7,121,106,0.12);
}
.plan-wrap-popular{
border:3px solid #07796a;
border-radius:18px;
overflow:hidden;
background:#07796a;
box-shadow:0 8px 28px rgba(7,121,106,0.18);
}
.plan-wrap-popular:hover{
box-shadow:0 12px 32px rgba(7,121,106,0.24);
}
.plan-wrap-popular .plan-card{
border:0;
border-radius:14px 14px 0 0;
box-shadow:none;
}
.plan-wrap-popular:hover .plan-card{
box-shadow:none;
}
.plan-badge{
display:block;
width:100%;
box-sizing:border-box;
text-align:center;
padding:12px 14px;
font-size:12px;
font-weight:800;
letter-spacing:1.2px;
text-transform:uppercase;
background:#07796a;
color:#fff;
white-space:nowrap;
-webkit-flex:0 0 auto;
flex:0 0 auto;
}
.plan-name{
margin:0 0 14px;
font-size:1.55em;
font-weight:800;
color:#0b1f33;
text-transform:none;
letter-spacing:-0.02em;
}
.plan-price-row{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
gap:10px;
margin-bottom:8px;
}
.plan-price{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:end;
-webkit-align-items:flex-end;
align-items:flex-end;
line-height:1;
}
.plan-currency{
font-size:1em;
font-weight:700;
color:#0b1f33;
margin-right:2px;
position:relative;
top:-0.7em;
}
.plan-amount{
font-size:2.75em;
font-weight:800;
color:#0b1f33;
letter-spacing:-0.03em;
}
.plan-unit{
font-size:0.95em;
font-weight:600;
color:#4b5563;
margin-left:4px;
margin-bottom:0.4em;
}
.plan-save{
display:inline-block;
background:#e7f7f2;
color:#07796a;
font-size:12px;
font-weight:700;
padding:5px 11px;
border-radius:999px;
line-height:1.2;
border:1px solid #b7e5d8;
}
.plan-cycle{
color:#07796a;
font-weight:800;
font-size:1em;
margin:0 0 6px;
}
.plan-billing{
color:#6b7280;
font-size:0.8em;
line-height:1.5;
margin:0 0 18px;
}
.plan-billing s{
color:#9ca3af;
margin-right:4px;
}
.plan-billing strong{
color:#0b1f33;
font-weight:700;
}
.plan-btn{
display:block;
width:100%;
text-align:center;
text-decoration:none !important;
border-radius:999px;
padding:14px 16px;
font-weight:700;
font-size:0.95em;
box-sizing:border-box;
-webkit-transition:background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
transition:background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.plan-btn-solid{
background:#07796a;
color:#fff !important;
border:2px solid #07796a;
}
.plan-btn-solid:hover,
.plan-btn-solid:focus{
background:#066257;
border-color:#066257;
color:#fff !important;
box-shadow:0 8px 18px rgba(7,121,106,0.28);
}
.plan-btn-outline{
background:#fff;
color:#07796a !important;
border:2px solid #07796a;
}
.plan-btn-outline:hover,
.plan-btn-outline:focus{
background:#07796a;
color:#fff !important;
}
.plan-guarantee{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
justify-content:center;
text-align:center;
color:#07796a;
font-size:0.8em;
margin:12px 0 18px;
line-height:1.4;
gap:6px;
}
.plan-guarantee-ico{
display:inline-block;
width:15px;
height:15px;
border-radius:50%;
background:#07796a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M4.7 8.6L2.4 6.3l.9-.9 1.4 1.4 3.5-3.5.9.9z'/%3E%3C/svg%3E") center/10px no-repeat;
-webkit-flex:0 0 15px;
flex:0 0 15px;
}
.plan-card .plan-features{
width:100%;
margin:0;
padding:16px 0 0;
border-top:1px solid #e6ebf0;
text-align:left;
}
.plan-card .plan-features-extra{
margin-top:10px;
padding-top:12px;
}
.plan-card .plan-features li{
position:relative;
color:#1f2937;
font-size:0.9em;
line-height:1.45;
padding:0.55em 0 0.55em 2.15em;
}
.plan-card .plan-features li:before{
content:"";
position:absolute;
left:0;
top:0.55em;
width:18px;
height:18px;
border-radius:5px;
background:#00a884 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M4.7 8.6L2.4 6.3l.9-.9 1.4 1.4 3.5-3.5.9.9z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plan-card .plan-features li.feat-vpn:before{
border-radius:6px;
background:#e11d48 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.5l5 2.2v4.1c0 3.1-2.1 5.9-5 6.7-2.9-.8-5-3.6-5-6.7V3.7L8 1.5zm0 2.1L4.5 5v2.8c0 2.1 1.4 4 3.5 4.7 2.1-.7 3.5-2.6 3.5-4.7V5L8 3.6z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.plan-card .plan-features li.feat-check:before{
border-radius:50%;
background:#00a884 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M4.7 8.6L2.4 6.3l.9-.9 1.4 1.4 3.5-3.5.9.9z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plan-card .plan-features li.feat-muted{
color:#9ca3af;
}
.plan-card .plan-features li.feat-muted:before{
background:#d1d5db;
background-image:none;
border-radius:2px;
height:3px;
top:0.95em;
width:12px;
left:3px;
}
.plan-card .plan-features li.feat-speed:before{
background:#0f2f3f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 2a6 6 0 100 12A6 6 0 008 2zm.8 3.2L7.2 9.1h1.5l-1.1 3.2 3.3-5.1H9.3l.5-2z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-card .plan-features li.feat-globe:before{
background:#0f2f3f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm0 1.2c.7 0 1.9 1.7 2.3 4.3H5.7C6.1 4.4 7.3 2.7 8 2.7zm-2.5.7C4.4 4.5 3.4 6 3.1 7.8h2.2C5.6 5.8 5.9 4.3 5.5 3.4zm5 0c-.4.9-.1 2.4.2 4.4h2.2c-.3-1.8-1.3-3.3-2.4-4.4zM3.1 9c.3 1.8 1.3 3.3 2.4 4.4.4-.9.1-2.4-.2-4.4H3.1zm2.6 0c.3 2.1.9 3.7 2.3 3.7s2-1.6 2.3-3.7H5.7zm5.1 0c-.3 2-.1 3.5.2 4.4 1.1-1.1 2.1-2.6 2.4-4.4h-2.6z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-card .plan-features li.feat-shield:before{
background:#0f2f3f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.5l5.5 2.2v4.3c0 3.3-2.3 6.3-5.5 7.2C4.8 14.3 2.5 11.3 2.5 8V3.7L8 1.5zm2.2 4.2L7.1 8.8 5.7 7.4l-.9.9 2.3 2.3 4.1-4.1-.9-.8z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-card .plan-features li.feat-support:before{
background:#0f2f3f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.8A5.2 5.2 0 002.8 7v1.2A1.5 1.5 0 004.3 9.7h.9V6.8H4.1A3.9 3.9 0 018 2.9a3.9 3.9 0 013.9 3.9h-1.1v2.9h.9a1.5 1.5 0 001.5-1.5V7A5.2 5.2 0 008 1.8zM6.2 10.5v.7A1.8 1.8 0 008 13a1.8 1.8 0 001.8-1.8v-.7H6.2z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-card .plan-features li small{
display:block;
color:#6b7280;
font-size:0.88em;
margin-top:2px;
font-weight:400;
}
.plan-card .plan-features li span{
color:#07796a;
font-weight:700;
}
@media (max-width:1024px){
.plan-wrap{
width:calc(50% - 12px);
min-width:0;
}
}
@media (max-width:480px){
.plan-cards{
gap:12px;
padding:40px 8px 0;
}
.plan-wrap{
width:calc(50% - 6px);
}
.plan-wrap-popular{
border-radius:16px;
}
.plan-card{
padding:22px 10px 14px;
border-radius:14px;
}
.plan-name{
font-size:1.15em;
}
.plan-amount{
font-size:1.85em;
}
.plan-btn{
padding:10px 8px;
font-size:0.78em;
}
.plan-card .plan-features li{
font-size:0.72em;
padding-left:26px;
}
.plan-card .plan-features li:before{
width:14px;
height:14px;
top:0.5em;
background-size:9px;
}
.plan-card .plan-features li.feat-vpn:before,
.plan-card .plan-features li.feat-speed:before,
.plan-card .plan-features li.feat-globe:before,
.plan-card .plan-features li.feat-shield:before,
.plan-card .plan-features li.feat-support:before{
background-size:10px;
}
.plan-card .plan-features li.feat-muted:before{
width:10px;
height:2px;
top:0.85em;
left:2px;
}
.plan-badge{
font-size:11px;
padding:9px 10px;
letter-spacing:0.6px;
}
}
.price-section {
	padding: 6em 0;
	background:#e7edf3;
}
.price-section-head h3 {
	color: #394b50;
	font-size: 2.2em;
	font-weight: 900;
	text-transform: uppercase;
}
.price-section-head p {
	color: #394b50;
	font-size: 1.2em;
	font-weight: 500;
}
.price-head{
padding:1.5em 0;
border-bottom:1px solid #d5d5d5;
border-radius:4px 4px 0 0;
}
.price-head h5 {
	color:#1a1a1a;	
	font-size:1.8em;
	text-transform: uppercase;
	font-weight:700;
}
.price-head-free{
background:#7f8c8d;
border-bottom-color:#7f8c8d;
}
.price-head-personal{
background:#1abc9c;
border-bottom-color:#1abc9c;
}
.price-head-business{
background:#e67e22;
border-bottom-color:#e67e22;
}
.price-head-ultimate{
background:#8e44ad;
border-bottom-color:#8e44ad;
}
.price-head-free h5,
.price-head-personal h5,
.price-head-business h5,
.price-head-ultimate h5,
.price-value:hover .price-head-free h5,
.price-value:hover .price-head-personal h5,
.price-value:hover .price-head-business h5,
.price-value:hover .price-head-ultimate h5{
color:#fff;
}
.cost{
padding:1.8em 0;
border-bottom:1px solid #d5d5d5;
}
.cost h3 span {
	font-size:0.5em;
	vertical-align: top;
}
.cost h3 {
	color:#1a1a1a;
	font-size:4.2em;
	font-weight:600;
}
.cost p {
	color:#999999;
	font-size:1.3em;
	font-weight:500;
}
.cost-info p{
 color: #aeadad;
  font-size: 1.3em;
  line-height: 1.5em;
  font-weight: 400;
  padding:2.5em 0;
  width: 80%;
  margin:0 auto;
}
.cost-info p span{
color:#1196d9;
font-weight:400;
}
.plan-features{
list-style:none;
margin:0 auto 1.2em;
padding:1.2em 1em 0.5em;
width:90%;
text-align:left;
}
.plan-features li{
position:relative;
padding:0.4em 0 0.4em 1.7em;
color:#8a8a8a;
font-size:0.95em;
line-height:1.45;
font-weight:400;
}
.plan-features li:before{
content:"";
position:absolute;
left:0;
top:0.55em;
width:14px;
height:14px;
border-radius:50%;
background:#00a884;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M4.7 8.6L2.4 6.3l.9-.9 1.4 1.4 3.5-3.5.9.9z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
background-size:10px 10px;
}
.plan-features li.plan-feature-info:before{
background:#95a5a6;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctext x='6' y='9' text-anchor='middle' font-size='9' font-family='Arial' fill='%23fff'%3Ei%3C/text%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
background-size:10px 10px;
}
.plan-features li span{
color:#008567;
font-weight:600;
}
.cost-info a{
color:#1196d9;
background:transparent;
border:1px solid #d5d5d5;
display:inline-block;
text-decoration:none;
padding:12px 2.2em;
font-size:1em;
font-weight:700;
}
.price-value {
	border: 1px solid #ccd5df;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	padding:0em 0em 2em 0em;
	background:#fff;
	width:22.5%;
	margin-right:2.5%;
	float:left;
	margin-top:6em;
}
.price-value:hover div.cost:hover {
background:#008ed6;
}
.price-value:hover div.price-head h5{
	color:#008ed6;
    transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.price-value:hover div.cost{
background:#008ed6;
}
.price-value:hover div.cost-info a{
background:#008ed6;
color:#fff;
}
.price-value:hover div.cost span ,.price-value:hover div.cost p,.price-value:hover div.cost h3{
color:#fff;
}
.price-value:hover div.price-section-grid ul li {
	color:#c2e1ff;
}
.price-value:hover {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	z-index: 1;
	border:1px solid #008ed6;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
/*----*/
.contact{
padding:3% 0 0 0;
background:#ededed;
position:relative;
}
.contact-text{
text-align:center;
}
.contact-text h4{
font-size: 1em;
font-weight: 700;
letter-spacing: 1px;
color: #008ed6;
margin-bottom: 0.5em;
}
.contact-text h3{
font-size: 2.7em;
font-weight: 600;
color: #15141a;
padding-bottom: 0.5em;
background: url(../images/line.png) no-repeat 50% 100%;
}
.contact-grids{
margin:5% 0;
}
.icon1{
background: url(../images/icons1.png) no-repeat -46px -14px;
width: 28px;
height: 35px;
display:inline-block;
text-align:center;
margin-bottom:1em
}
.icon2{
background: url(../images/icons1.png) no-repeat -96px -14px;
width: 28px;
height: 35px;
display:inline-block;
text-align:center;
margin-bottom:1em
}
.icon3{
background: url(../images/icons1.png) no-repeat -145px -14px;
width: 35px;
height: 35px;
display:inline-block;
text-align:center;
margin-bottom:1em
}
.contact-grid p{
color:#999999;
font-weight:500;
font-size:1.25em;
}
.contact-grid a{
color:#999999;
font-weight:500;
display:block;
text-decoration:none;
font-size:1.25em;
}
.contact-grid a:hover{
color:#008ed6;
}
.contact-details{
background:#15141a;
padding:4em 4em 3em 4em;
width: 49%;
position: absolute;
bottom: 35%;
left: 26%;
}
.contact-details form input[type="text"],.contact-details form textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #444348;
font-size: 1.1em;
margin-bottom: 1.2em;
color: #444348;
outline: none;
background:transparent;
font-weight: 700;
}
.contact-details form textarea {
height: 168px;
resize: none;
width: 100%;
}
.contact-right{
text-align:right;
}
.contact-details input[type="submit"] {
background: #008ed6;
padding: 14px 2em;
border: none;
font-size: 1em;
margin: 0.5em 0 0 0;
color: #fff;
outline: none;
font-weight: 600;
border-radius:5px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.map iframe{
height:500px;
width:100%;
}
/*--footer--*/
.footer{
background:#15141a;
padding:3em 0;
}
.social span {
background: url(../images/social.png) no-repeat 0px 0px;
width: 27px;
height: 27px;
display: inline-block;
margin-right:1.5em;
transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
a span.behance {
background-position: -8px -7px;
}
a span.dribble {
background-position: -8px -44px;
}
a span.twitter {
background-position: -8px -83px;
}
a span.facebook {
background-position: -8px -127px;
}
a span.linkedin {
background-position: -11px -163px;
}
a span.behance:hover{
background-position: -49px -7px;
}
a span.dribble:hover{
background-position: -51px -45px;
}
a span.twitter:hover {
background-position: -8px -83px;
}
a span.facebook:hover {
background-position: -52px -128px;
}
a span.linkedin:hover {
background-position: -58px -163px;
}
.footer p{
color: #3e3d43;
font-size: 1.1em;
font-weight: 600;
text-transform:uppercase;
margin-top:1em;
}
.footer p a{
color: #3e3d43;
}
.footer p a:hover{
color: #fff;
}
/*----*/
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 0%;
	right: 1%;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border: none;
	text-indent: 100%;
	background: url("../images/easytop.png") no-repeat 0px 0px;
}
#toTopHover {
	width: 40px;
	height: 40px;
	display: block;
	overflow: hidden;
	float: right;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}
/*--responsive--*/
@media (max-width: 1280px){
.about-device-bottom {
width: 55%;
margin-top: 3em;
}
.about-device-bottom img {
background-size: 100%;
width: 100%;
}
.contact-details {
width: 55%;
bottom: 35%;
left: 23%;
}
}
@media (max-width: 1024px){
.banner-text h1 {
font-size: 3em;
}
.banner-text h3 {
font-size: 0.85em;
}
.banner-pic img {
background-size: 100%;
width: 100%;
}
.banner-text {
width: 56%;
margin-top: 4%;
}
.banner-pic {
width: 41%;
}
.banner {
min-height: 514px;
}
.banner-text p {
font-size: 1.1em;
width: 77%;
}
a.download,a.view {
font-size: 1.05em;
padding: 13px 2em;
}
.features-head h4,.device-text h4,.device-text-bottom h4,.pricing-text h4,.pricing-text-bottom h4 
,.contact-text h4{
font-size: 0.9em;
}
.features-head h3,.device-text h3,.device-text-bottom h3,.pricing-text h3,.pricing-text-bottom h3
,.contact-text h3{
font-size: 2.5em;
}
.feature-grid p {
font-size: 1.15em;
}
.about-device {
width: 44%;
}
.about-device img {
width: 100%;
}
.about-device-info {
width: 56%;
padding-left: 2em;
}
.device-text p {
font-size: 1.2em;
width: 85%;
}
.device-text-bottom p {
font-size: 1.2em;
}
.about-customize {
width: 50%;
}
.about-device-bottom{
width:50%;
}
.about-device-bottom {
margin-top: 6em;
}
.pricing-plans p {
font-size: 1.4em;
}
.pricing {
min-height: 572px;
}
.theme {
padding: 3em 0;
}
.theme h3 {
font-size: 2.2em;
margin-right: 1em;
}
.cost-info p {
font-size: 1.2em;
width: 94%;
}
.pricing-bottom {
padding: 3% 0 5% 0;
}
.contact-details {
width: 71%;
left: 15%;
padding: 3em;
bottom: 28%;
}
.map iframe {
height: 415px;
}
}
@media (max-width: 768px){
.banner-text h3 {
font-size: 0.8em;
}
.banner-text h1 {
font-size: 2.4em;
}
.banner-text {
width: 53%;
margin-top: 4%;
float: left;
}
.banner-pic {
width: 46%;
float: left;
padding-left: 3em;
margin-top:1.5em;
}
.banner-text p {
font-size: 1em;
width: 93%;
}
.banner {
min-height: 440px;
}
a.download, a.view {
font-size: 0.95em;
padding: 11px 1.2em;
}
.features-head h4, .device-text h4, .device-text-bottom h4, .pricing-text h4, .pricing-text-bottom h4, .contact-text h4 {
font-size: 0.85em;
}
.features-head h3, .device-text h3, .device-text-bottom h3, .pricing-text h3, .pricing-text-bottom h3, .contact-text h3 {
font-size: 2.3em;
}
.pricing-text-bottom h3 {
padding-bottom: 1em;
}
.feature-grid {
width: 50%;
float: left;
margin-bottom:2em;
}
.feature-grid h3 {
font-size: 1.7em;
}
.feature-grid p {
font-size: 1.1em;
}
.about-device {
float: left;
}
.about-device-info {
float: left;
padding-top: 3em;
}
.device-text p {
font-size: 1.1em;
width: 100%;
}
.about-list ul li a {
font-size: 1.1em;
}
.about-list {
margin-top: 1.2em;
}
.about-customize {
width: 51%;
float: left;
}
.device-text-bottom p {
font-size: 1em;
}
.device-text-bottom {
padding-top: 2em;
}
.about-device-bottom {
width: 49%;
float: left;
}
.pricing-plans {
width: 50%;
float: left;
}
.pricing-plans p {
font-size: 1.3em;
}
.pic1 {
width: 15%;
}
.pic-info {
width: 80%;
}
.pic-info h5 {
font-size: 1em;
}
.pricing {
min-height: 460px;
}
ul.callbacks_tabs.callbacks1_tabs {
bottom: -53%;
}
.theme h3 {
font-size: 1.7em;
}
.price-value {
width: 48%;
margin-right: 2%;
margin-top: 2em;
float:left;
}
.price-value:nth-child(2),
.price-value:nth-child(4){
margin-right:0;
}
.price-value:nth-child(3),
.price-value:nth-child(4){
display:block;
}
.contact-grid.text-center {
width: 33.3%;
float: left;
}
.contact-grid p,.contact-grid a{
font-size: 1.1em;
}
.contact-details {
width: 60%;
left: 21%;
padding: 3em;
bottom: 17%;
}
.contact-details form input[type="text"], .contact-details form textarea {
padding: 7px 14px;
font-size: 1em;
margin-bottom: 1em;
}
.contact-details form textarea {
height: 116px;
}
.contact-details input[type="submit"] {
padding: 11px 1.7em;
font-size: 0.85em;
}
}
@media (max-width: 640px){
.top-menu ul li a {
font-size: 1.1em;
padding: 0 2px 10px 2px;
margin: 0 0.3em;
}
.banner {
min-height: 398px;
}
.banner-text h3 {
font-size: 0.7em;
}
.banner-text h1 {
font-size: 2em;
}
.banner-text p {
font-size: 0.95em;
width: 100%;
}
.banner-pic {
width: 47%;
margin-top: 3.5em;
}
.features-head h4, .device-text h4, .device-text-bottom h4, .pricing-text h4, .pricing-text-bottom h4, .contact-text h4 {
font-size: 0.8em;
}
.features-head h3, .device-text h3, .device-text-bottom h3, .pricing-text h3, .pricing-text-bottom h3, .contact-text h3 {
font-size: 2em;
}
.feature-grid h3 {
font-size: 1.5em;
}
.feature-grid p {
font-size: 1em;
}
.about-device {
width: 50%;
margin: 0 auto;
float: none;
}
.about-device-info {
float: none;
margin-top: 3em;
width: 100%;
padding-left: 1em;
}
.device-text p {
font-size: 1em;
}
.about-customize {
width: 100%;
float: none;
}
.about-device-bottom {
width: 82%;
float: none;
margin: 1em auto 0 auto;
}
.pricing-plans {
width: 100%;
float: none;
margin-bottom: 2em;
}
.pricing-plans p {
font-size: 1.2em;
width: 94%;
}
.pic1 {
width: 10%;
}
.pic-info {
width: 76%;
margin-left: 3%;
padding-top: 0.7em;
}
.pic-info a {
font-size: 0.9em;
}
ul.callbacks_tabs.callbacks1_tabs {
bottom: -10%;
}
.theme {
padding: 2em 0;
text-align: center;
}
.theme h3 {
font-size: 1.7em;
display: block;
margin-bottom: 1em;
}
.price-value {
width: 48%;
float:left;
margin-right:2%;
}
.price-value:nth-child(2),
.price-value:nth-child(4) {
margin-right:0;
}
.price-value:nth-child(3),
.price-value:nth-child(4) {
display:block;
}
.price-head h5 {
font-size: 1.55em;
}
.cost-info p {
font-size: 1em;
width: 95%;
}
.cost {
padding: 1.5em 0;
}
.cost h3 {
font-size: 3.5em;
}
.cost h3 span {
font-size: 0.4em;
}
.cost-info a {
padding: 11px 2em;
font-size: 0.9em;
}
.contact-grid p, .contact-grid a {
font-size: 1em;
}
.contact-details form input[type="text"], .contact-details form textarea {
font-size: 0.9em;
}
.contact-details {
width: 65%;
left: 18%;
padding: 2em;
bottom: 13%;
}
.contact-details form textarea {
height: 103px;
}
.contact-details input[type="submit"] {
padding: 10px 1.7em;
font-size: 0.8em;
}
.map iframe {
height: 340px;
}
}
@media(max-width: 480px){
span.menu:before {
	content: url(../images/nav.png);
	cursor: pointer;	
	height:32px;
}
.top-menu {
width: 11%;
float: right;
margin:0;
}
.top-menu  ul{
	display:none;
}
.top-menu  ul li {
	font-size: 12px;
	display:inline-block;
	width: 100%;
}
.top-menu ul li a {
padding:3px;
font-size: 14px;
width: 100%;
font-weight:600;
display:block;
margin:0;
}
.top-menu ul li a:hover,.top-menu ul li.active a{
border-bottom:none;
}
.top-menu ul li a:hover{
color:#16151b;
}
 span.menu{
	display:block;
	float:right;
}
.top-menu  ul{
	margin: 0;
	z-index: 999;
	position: absolute;
	width: 96%;
	text-align: center;
	top:9%;
	left: 2%;
	background:#008ed6;
}
.banner-text h3 {
font-size: 0.65em;
}
.banner-text h1 {
font-size: 1.5em;
}
.banner-text p {
font-size: 0.9em;
overflow: hidden;
height: 53px;
}
a.download, a.view {
font-size: 0.9em;
padding: 10px 1em;
}
.banner-pic {
width: 47%;
padding-left:15px;
margin-top: 2.5em;
}
.banner {
min-height: 335px;
}
.features-head h4, .device-text h4, .device-text-bottom h4, .pricing-text h4, .pricing-text-bottom h4, .contact-text h4 {
font-size: 0.75em;
}
.features-head h3, .device-text h3, .device-text-bottom h3, .pricing-text h3, .pricing-text-bottom h3, .contact-text h3 {
font-size: 1.6em;
}
.features-section {
margin-top: 2.5em;
}
.feature-grid img {
background-size: 100%;
width: 35%;
}
.feature-grid h3 {
font-size: 1.3em;
}
.feature-grid p {
font-size: 0.95em;
}
.about-device {
width: 70%;
}
.about-device-info {
margin-top: 0em;
}
.about-list ul li a {
font-size: 1em;
}
.about-list ul li {
margin-bottom:4px;
}
.device-text-bottom p {
font-size: 0.95em;
}
.device-text-bottom p {
font-size: 0.95em;
}
.pricing-plans p {
font-size: 1.1em;
width: 100%;
}
.pic-info h5 {
font-size: 0.9em;
margin-bottom: 3px;
}
.pic1 {
width: 13%;
}
.pic-info {
padding-top: 0.5em;
}
.pricing {
min-height: 500px;
}
ul.callbacks_tabs.callbacks1_tabs {
bottom: -11%;
}
.callbacks_here a:after {
border: 4px solid #FFF;
width: 11px;
height: 11px;
}
.theme h3 {
font-size: 1.55em;
margin-bottom: 0.7em;
margin-right: 0em;
}
.price-head {
padding: 1.2em 0;
}
.price-head h5 {
font-size: 1.4em;
}
.cost h3 {
font-size: 3em;
}
.cost-info p {
font-size: 1em;
padding: 2em 0;
}
.cost-info a {
padding: 9px 2em;
font-size: 0.85em;
}
.pricing-bottom,.contact {
padding: 5% 0 5% 0;
}
.features{
padding:5% 0;
}
.contact-grid.text-center {
padding: 0;
}
.contact-details {
width: 79%;
left: 10%;
padding: 1.5em;
bottom: 18%;
}
.contact-details form textarea {
height: 87px;
}
.contact-left,.contact-right{
padding:0;
}
.footer p {
font-size: 1em;
}
}
@media(max-width: 320px){
.top-menu ul {
top: 13.5%;
}
.banner-text {
width: 100%;
float:none;
}
.banner-pic {
width: 73%;
margin:2em auto 0 auto;
float:none;
padding-left:0px;
}
.banner-text {
padding: 0;
}
.banner-text h1 {
font-size: 1em;
}
.feature-grid {
width: 100%;
}
.about-device {
width: 90%;
}
.about-device-bottom {
width: 100%;
}
.features-head h4, .device-text h4, .device-text-bottom h4, .pricing-text h4, .pricing-text-bottom h4, .contact-text h4 {
font-size: 0.7em;
}
.features-head h3, .device-text h3, .device-text-bottom h3, .pricing-text h3, .pricing-text-bottom h3, .contact-text h3 {
font-size: 1.4em;
}
.device-text p {
font-size: 0.95em;
}
.about-device-info {
padding: 2em 0 0 0;
}
a.view{
margin-right:1em;
padding: 9px 0.86em
}
.pic1 {
width: 21%;
}
.pricing-plans {
padding: 0;
}
ul.callbacks_tabs.callbacks1_tabs {
bottom: -5%;
left: 28%;
}
.theme h3 {
font-size: 1.4em;
}
.price-value {
width: 48%;
float:left;
margin-right:2%;
margin-top: 2em;
}
.price-value {
margin-right: 2%;
}
.price-value:nth-child(2),
.price-value:nth-child(4){
margin-right:0;
}
.contact-grid.text-center {
width: 100%;
float: none;
margin-bottom:1em;
}
.icon1,.icon2,.icon3 {
margin-bottom: 0.5em;
}
.contact-details {
width: 80%;
left: 10%;
padding: 1.5em;
bottom: 12%;
}
.footer p {
font-size: 0.85em;
}
.social span{
margin-right:1em;
}
}

/* 移动端客服弹窗：左右各留 20px */
@media screen and (max-width: 767px) {
#layui-layer19911116 {
width: calc(100% - 40px) !important;
left: 20px !important;
right: 20px !important;
}
}