/*layout*/
body{
    overflow-x: hidden;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
}
#main-container{
    margin-top:100px;
}
section{
    padding-top:80px;
    padding-bottom:80px;
}
.no-padding-top{
    padding-top:0px;
}
.no-padding-bottom{
    padding-bottom:0px;
}
img{
    max-width:100%;
    height:auto;
}
/*text*/
h1,h2,h3,h4,p{
    font-weight: 300;
}
h1{
    font-size:48px;
    margin-bottom: 20px;
}
h2{
    font-size: 32px;
    margin-bottom: 25px;
    margin-top: 25px;
}
h3{
    font-size: 26px;
    margin-top: 20px;
}
h4{
    font-size: 20px;
}
.col-sm-12 > h4,.col-md-12 > h3{
    margin-bottom:60px;
}
p{
    line-height:1.7;
}
.text-dark {
    color:#222222;
}
.text-light {
    color:#fff;
}
a{
    color:#0171c3;
}
a:focus, a:hover{
  text-decoration:none;
  color: #03a9f4;
}
.btn{
    border:1px solid #0171c3;
}
.btn:hover{
    background-color: #059ff2;
    color: #fff;
}
.col-md-6 ul{
  padding-left:20px;
  margin-bottom: 60px;
}
.col-md-6 ul li{
  padding-bottom:10px;
}
.col-md-6 h3{
    margin-top: 80px;
}
.list-inline{
}
.list-inline>li {
    padding-right: 15px;
    padding-left: 15px;
}
.list-inline>li img{
  margin-top: 40px;
}
/*bg color*/
.bg-blue1{
    background-color:#dae9fb;
}
.bg-blue2{
    background-color:#059ff2;
}
.bg-blue3{
    background-color:#0171c3;
}
.bg-blue4{
    background-color:#0066b0;
}
.bg-blue5{
    background-color:#02518a;
}
.bg-dark{
    background-color:#333333;
}
.bg-blue-light {
    background-color:#e1f2ff;
}
.bg-blue-plan-1 {
    background-color:#0a3f77;
}
.bg-blue-plan-2 {
    background-color:#03a9f4;
}
.bg-blue-title {
    background-color:#0071c2;
}
/*nav*/
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 250px;
}
#wrapper.toggled #page-wrapper{
    width: 100%;
}
#wrapper.toggled #page-wrapper:after{
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(225,238,254,0.6);
    opacity: 1;
    z-index: 9999;
    cursor: pointer;
    -webkit-transition: opacity .5s,width .1s .5s,height .1s .5s;
    transition: opacity .5s,width .1s .5s,height .1s .5s;
}
nav {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #0066b0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled nav {
    width: 250px;
}
#page-wrapper {
    width: 100%;
    position: absolute;
}
#wrapper.toggled #page-wrapper {
    position: fixed;
    margin-right: -250px;
    overflow: hidden;
    height: 100%;
}
nav ul {
    width: 100%;
    margin: 0;
    padding: 20px;
    list-style: none;
}
nav ul li {
    line-height: 3;
}
nav ul li a {
    display: block;
    color: #ffffff;
    font-size: 20px;
}
nav ul li+li {
    border-top: 1px solid #ffffff;
}
nav ul li a:hover,nav ul li a:focus {
    text-decoration: none;
    color: #dae9fb;
}
nav ul li div{
  display:none;
}
nav ul li:hover div,nav ul li:focus div{
  display:block;
}
nav ul li div ul{
  padding:0;
  border-top: 1px solid #fff;
  background: #0066b0;
}
nav ul li div ul li{
  border-top: 0;
  padding: 0 15px;
}
nav ul li div ul li a {
    font-size: 18px;
}
/*header*/
header{
    padding:15px;
    background:#fff;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 100px;
    z-index: 9999;
}
header .container{
    position: relative;
    padding-top: 0;
}
#menu-toggle span,#menu-toggle span:before,#menu-toggle span:after{
    text-indent: -9999em;
    background: #0066b0;
    webkit-transition: all .5s cubic-bezier(0,0.275,0.125,1);
    -moz-transition: all .5s cubic-bezier(0,0.275,0.125,1);
    -o-transition: all .5s cubic-bezier(0,0.275,0.125,1);
    transition: all .5s cubic-bezier(0,0.275,0.125,1);
    display: block;
    position: absolute;
    z-index: 10000;
    width: 26px;
    height: 2px;
    top: 8px;
    left: 0;
}
#menu-toggle:hover span,#menu-toggle:hover span:before,#menu-toggle:hover span:after{
    background: #059ff2;
}
#menu-toggle span:before {
    content: "";
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    top: -6px;
    z-index: 10;
}
#menu-toggle span:after {
    content: "";
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    top: 6px;
    z-index: 10;
}
#wrapper.toggled header{
    position: absolute;
    z-index: auto;
}
#wrapper.toggled #menu-toggle span {
    background: transparent;
}
#wrapper.toggled #menu-toggle span:before {
    -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
    -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
    -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
    -o-transform: translateY(6px) translateX(1px) rotate(45deg);
    transform: translateY(6px) translateX(1px) rotate(45deg);
}
#wrapper.toggled #menu-toggle span:after {
    -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -o-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    transform: translateY(-6px) translateX(1px) rotate(-45deg);
}
header #menu-toggle{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 26px;
    height: 19px;
    z-index: 10000;
    display: none;
}
header .menu-list{
    position: absolute;
    top: 20px;
    left: 0;
}
header .menu-list ul {
    margin: 0;
    list-style: none;
    padding: 0;
}
header .menu-list ul li {
    display:inline-block;
    position: relative;
    float: left;
}
header .menu-list ul li a{
  line-height: 40px;
}
header .menu-list ul li{
  padding: 0px 20px;
}
header .menu-list ul li div{
    display: none;
    background: #FFFFFF;
    position: absolute;
    z-index: 5;
    padding: 5px;
    margin-left: -30px;
}
header .menu-list ul li div li{
}
header .menu-list ul li div li a{
    white-space: nowrap;
}
header .menu-list ul li:hover div{
    display: table;
    width: 200px;
}
header #logo{
    position: absolute;
    left: 50%;
    margin-left: -55px;
}
header .btn{
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 16px;
}
/*section*/
section.home-main{
    background: url(/img/home-main.jpg) center center no-repeat;
    background-size: cover;
    height: 600px;
}
section.home-device{
    background: url(/img/home-device-pattern.png) repeat;
    background-size: contain;
}
section.home-device h4 {
    margin-bottom:20px;
}
section.home-interactive{
    background: url(/img/interactive-bg.jpg) center center no-repeat;
    background-size: cover;
}
section.action{
    padding:40px 0;
}
section.action h3{
  margin-bottom:30px;
}
section.action .btn{
  color: #ffffff;
  background-color: #0171c3;
}
section.action .btn:hover{
  background-color: #059ff2;
}
section.home-move{
    background: url(/img/move-bg.jpg) center center no-repeat;
    background-size: cover;
}
/*sub-nav*/
.nav {
  margin: 0 auto;
  padding-left: 10%;
  height: 60px;
  background: #3498DB;
  overflow:hidden;
}
.nav li {
  float: left;
  text-align: center;
  line-height: 60px;
}
.nav a {
  display: block;
  width: 180px;
  height: 60px;
  color:#fff;
}
.nav .active, .nav li:hover { background: #2980B9; }
footer{
  background:#222222;
  padding:30px 0;
  color:#aaaaaa;
}
footer a{
  color:#aaaaaa;
}
footer a+a{
  padding-left:10px;
}
footer a:hover{
  color:#cccccc;
}
/* features */
.features {background: #0066b0 url('../img/bg-features.png') top center no-repeat;padding-bottom: 0;background-size: cover;}
.features p{font-size:26px;}
.nav-tab { padding:0;  }
.nav-tab a.page-scroll { display: block; padding: 20px 0; } 
.nav-tab a.page-scroll:focus { background-color: #0071c2; text-decoration: none; color: #ffffff;}
.nav-tab.affix { position: fixed; top: 100px; width: 100%; z-index: 999;}
.non-pd { padding: 0; }
/* plan */
.plan { margin:80px 0;  }
p.sub { font-size: 20px; }
.plan .head h3 { padding: 20px 0; margin-bottom: 0;}
.plan .content { background-color: #eeeeee; overflow: hidden;}
.plan .content p { padding: 20px; margin-bottom: 0; font-weight: bold; font-size: 20px;}
.plan .content .sign { overflow: hidden; padding: 20px 0;}
.plan .content .sign a { padding: 10px 20px; color: #ffffff; background-color:#03a9f4; font-weight: bold;}
.plan .content .sign a:hover { opacity: 0.7; }
.plan .content .inner { background-color: #ffffff; }
.plan .content .inner ul li { border-bottom:1px solid #eeeeee; padding: 20px 0;}
/* device */
.section-over { overflow: hidden; }
.most ul li { position: relative; padding: 10px 0 10px 65px; }
.most li:before { 
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    width: 56px;
    height: 56px;
}
.most li:nth-child(1):before {
    background: url('../img/icon-dual-camera.png') center no-repeat;
}
.most li:nth-child(2):before {
    background: url('../img/icon-video-palyback.png') center no-repeat;
}
.most li:nth-child(3):before {
    background: url('../img/icon-bluetooth.png') center no-repeat;
}
.most li:nth-child(4):before {
    background: url('../img/icon-navigation.png') center no-repeat;
}
.device {background: #0066b0 url('../img/bg-device.png') center center no-repeat;background-size: cover;} 
.bluetooth { background: #0066b0 url('../img/bg-bluetooth.png') top center no-repeat;  } 
.bluetooth span {display: block; font-size: 32px; padding-top: 10px;}
.bluetooth ul {margin-top: 50px;padding-left: 0;}
.bluetooth ul li {position: relative;padding: 10px 0 10px 50px;}
.bluetooth li:before { 
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 36px;
    height: 36px;
}
.bluetooth li:nth-child(1):before {
    background: url('../img/icon-connect-with-mobille.png') center no-repeat;
}
.bluetooth li:nth-child(2):before {
    background: url('../img/icon-compact-and-pocket.png') center no-repeat;
}
.bluetooth li:nth-child(3):before {
    background: url('../img/icon-accurate-and-reliable.png') center no-repeat;
}
.bluetooth li:nth-child(4):before {
    background: url('../img/icon-simple-operation.png') center no-repeat;
}
.bluetooth li:nth-child(5):before {
    background: url('../img/icon-free-smartphone.png') center no-repeat;
}
.bluetooth li:nth-child(6):before {
    background: url('../img/icon-oled.png') center no-repeat;
}
.spec .row { border-top: 1px solid #d2d2d2; padding: 10px 0;}
.subscribe { padding-top: 30px; }
.subscribe a {border: 1px solid #0171c3;padding: 10px 25px;border-radius: 3px;margin-top: 20px;color: #ffffff;}
.subscribe a:hover{background:#0171c3;}
/* device2 */
.device2 { background: #0066b0 url('../img/bg-device2.png') top center no-repeat; background-size: cover;} 
.interactive { background: #0066b0 url('../img/bg-interactive.png') top center no-repeat; background-size: cover; }
@media (min-width: 1300px){
.container {
    width: 1270px;
}
}
@media (min-width: 1400px){
.container {
    width: 1370px;
}
}
@media only screen and (max-width: 980px) {
    #menu-toggle{display: block!important;}
    header .menu-list{display:none;}
    .nav-tab.affix { position: static;display:none;}
}
@media (max-width: 767px){
h1{
    font-size:30px;
}
h2{
    font-size:26px;
}
h3{
    font-size:20px;
}
h4{
    font-size: 18px;
}
header {
    position: absolute;
}
header .btn {
    display:none;
}
}