@charset "utf-8";
/******** common start ********/
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
html,body{background:#fff;margin:0;padding:0;color:#191a1d;font-family:Roboto,Arial,Calibri,sans-serif,Segoe,"Segoe UI";font-size:16px;}
img{ border:0;max-width:100%;}
ul{list-style:none;padding:0;margin:0;}
a{color:#005af0;text-decoration:none;}
a:hover{color:#005af0;text-decoration:underline;}
.clearboth{clear:both;}
.hide{display:none;}
.action-button{display:flex;align-items:center;justify-content:flex-end;}
.menu-button{display:none;padding:1.5rem;color:#f30;cursor:pointer;font-size:0.75rem;position:relative;margin:0 0.5rem 0 2rem;outline:none;}
.menu-button::after,.menu-button::before{content:"";position:absolute;top:1.25rem;left:50%;display:block;width:0.92rem;height:0.125rem;margin-left:-0.46rem;background:#d7d7ff;}
.menu-button::before{top:1.56rem;height:0.18rem;border-top:0.125rem solid #d7d7ff;border-bottom:0.125rem solid #d7d7ff;background:none;}
/******** common end ********/
/******** header start ********/
.header{color:#fff; background:linear-gradient(45deg,#0d4881,#185194);overflow:hidden;}
.search-box{border-radius:4px;border:1px solid rgb(210, 210, 210);border-image:none;background-color:#1b71c4;width:132px;height:26px;-moz-border-radius:4px;margin-top:0rem;float:right;padding:1px 1px 1px 1px;position:relative;}
.search-btn{background:url(/images/global/search.png) no-repeat 0 0;border-left:0px;border-top:0px;border-right:0px;border-bottom:0px;width:22px;height:22px;cursor:pointer;overflow:hidden;margin-top:1px;margin-right:1px;float:right;}
.search-btn:hover{background:url(/images/global/search.png) no-repeat 0 -25px;}
.cse-search-box{padding:0 0 0 0;}
.cse-textcss{border-image:none;width:96px;color:#d7d7ff;background-color:#1b71c4;border:none;padding-left:4px;font-size:16px;margin-left:1px;margin-top:2px;margin-bottom:1px;float:left;}

.navbar{display:flex;align-items:center;min-height:4.375rem;max-width:75rem;margin:0 auto;line-height:4.375rem;}
.navbar .logo{float:left;width:137px;height:40px;background:url("/images/logo.png") no-repeat;margin-left:1rem;margin-top:0.2rem;margin-right:0.5rem;}
.navbar .ht-color{color:#d7d7ff;}
.nav-menu{margin:0 1rem 0 auto;}
.menus{display:flex;align-items:center;justify-content:flex-end;list-style:none;margin:0;padding:0;}
.nav-menu .sub-menu{position:absolute;left:0;right:0;overflow:hidden;margin:0 auto;max-height:0;z-index:9999;background:rgba(5,104,170,0.97);transition:max-height ease 0.2s;visibility:hidden;}
.menus > li > a, .menus > li > .has-sub-link{font-size:1rem;padding:0 2.5rem 0 0;text-decoration:none;color:#d7d7ff;cursor:pointer;position:relative;}
@media (min-width:880px){
.menus > li.has-sub > .has-sub-link::after{content:"";position:absolute;top:40%;margin:-0.125rem 0 0 0.31rem;width:0.25rem;height:0.25rem;border-bottom:0.125rem solid #d1d1fe;border-right:0.125rem solid #d1d1fe;transform:rotate(45deg);}
.menus > li.has-sub:hover > a, .menus > li.has-sub:hover > .has-sub-link, .menus > li.has-sub:hover > a::after, .menus > li.has-sub:hover > .has-sub-link::after{color:#009cff;border-color:#009cff;}
.menus > li.has-sub:hover > .has-sub-link ~ .sub-menu{max-height:31.25rem;visibility:visible;}
}
.app-container{display:flex;justify-content:space-around;align-items:flex-start;padding:2.5rem 0 0 0;overflow:hidden;font-size:0.87rem;color:#a6a6d4;line-height:1rem;max-width:75rem;margin:0 auto;}
.app-container a{color:#e3e3ff;text-decoration:none;}
.app-container a:hover{text-decoration:underline;}
.app-items{flex:0 1 48%;display:flex;flex-flow:row wrap;margin-bottom:2rem;}
.app-items dt{flex-basis:100%;font-size:0.875rem;line-height:1rem;margin-bottom:1.5rem;font-weight:normal;}
.app-items dd{width:49%;display:flex;align-items:center;font-size:1rem;line-height:1.25rem;margin:0 1% 2rem 0;color:#ffffff;}
.app-items span{padding-right:0.375rem;width:0;height:0;border-top:0.25rem solid transparent;border-left:0.4375rem solid #009cff;border-bottom:0.25rem solid transparent;}
@media (max-width:880px){
.navbar{flex-wrap:wrap;justify-content:space-between;}
.nav-menu{margin:0;width:100%;order:3;}
.menu-button{display:block;}
.submenu-button{position:absolute;right:0;top:0;display:block;height:4.375rem;width:3.12rem;margin-top:0.5rem;pointer-events:none;cursor:pointer;}
.submenu-button::before,.submenu-button::after{content:"";display:block;position:absolute;top:50%;left:50%;width:0.75rem;height:1px;margin:0 0 0 -0.375rem;background:#d7d7ff;z-index:99;transition:transform ease 0.15s;}
.submenu-button::after{transform:rotate(90deg);}
.submenu-opened::after{transform:none;}
.submenu-opened::before{transform:rotate(-180deg);}
.menus{position:absolute;width:100%;display:none;z-index:100;background:rgba(5,104,170,0.97);max-height:0;overflow:hidden;}
.menu-opened{display:block;max-height:9999px;}
.menus li {border-top:1px solid rgba(255,255,255,0.08);}
.menus > .has-sub{position: relative;}
.menus > li > a, .menus > li .has-sub-link{display:block;position:relative;cursor:pointer;outline:none;padding-left:1.5rem;}
.nav-menu .sub-menu{position:relative;}
.menus > li.has-sub > .has-sub-link::after{display:none;}
.menus .submenu-opened ~ .sub-menu{max-height:50rem;visibility:visible;}
.app-container{flex-wrap:wrap;padding:1rem 0 0 0;}
.app-items{padding:0 4%;flex-basis:100%;justify-content:space-between;margin-bottom:0;}
.cse-textcss{font-size:14px;}
}
@media (max-width:600px) {.app-items dd{width:100%;margin:0 1% 1.5rem 0;}.menu-button{margin:0 0.3rem 0 0.5rem;}.search-box{width:102px;}.cse-textcss{width:66px;}}
.homsebg{border:0;background:url("/images/global/homs.png") no-repeat left;color:#0d4881;padding-left:30px;}
.businbg{border:0;background:url("/images/global/busn.png") no-repeat left;color:#0d4881;padding-left:30px;}
/******** header end *********/
/******** header slide start ********/
.amp-carousel-button{display:none;}
.slider-nav {text-align:center;padding:2rem 0;}
.slider-nav button{width:25px;height:7px;margin:5px 7px;background:#5b5076;display:inline-block;transition:opacity 0.2s ease;border-radius:30px;border:none;outline:none;transition:all 0.5s ease;cursor:pointer;}
.slider-nav .slider-nav-active{background-color:#1b96ff;}
/******** header slide end ********/
/******** product  start ********/
.product{text-align:center;max-width:62.5rem;margin:0 auto;clear:both;width:92%;}
.product h1{font-size:2.625rem;line-height:3rem;color:#1b96ff;margin:0;padding:6rem 0 0.5rem 0;}
.product p{font-size:1.125rem;color:#ffffff;line-height:1.75rem;}
.product p.rating{font-size:1rem;line-height:1.25rem;color:#ffffff;vertical-align:middle;margin:0;padding-top:0.25rem;}
.button{max-width:28.125rem; margin:0 auto; padding:0.875rem 0 1.25rem 0;overflow:hidden;}
.btncolour, .btnside{display:block;text-align:center;padding:0;margin:0;float:left;text-decoration:none;font-size:1.25rem;font-weight:500;border-radius:3px;width:13.75rem;height:3.125rem;color:#ffffff;}
.btncolour{line-height:3.125rem;background:#ff5300;}
.btnside{line-height:2.865rem;border:2px solid #ffffff;margin-left:0.625rem;box-sizing:border-box;}
.btncolour:hover{background-color:#f30;color:#ffffff;}
.btnside:hover{color:#009cff;background:#ffffff;}
.box_wrap, .user-reviews, .tips_list{max-width:75rem;margin:0 auto;padding:3.75rem 0;overflow:hidden;width:92%;}
.box_wrap {padding:3.75rem 0;}
.box_wrap p{font-size:1rem;line-height:1.5rem; margin-top:1rem;}
.user-reviews, .tips_list{padding:0;}
.box_gray{background-color:#f5f7f9;padding:3.75rem 0;overflow:hidden;}
.box_wrap h2, .box_gray h2{text-align:center;font-size:1.875rem;line-height:2rem;color:#000b4a;padding:0.625rem 0 1.5rem 0;margin:0;}
.box_gray h3, .box_wrap h3{text-align:center;color:#000b4a;margin:0;font-size:1.5rem;padding:3rem 0 1.25rem 0;}
.box_one{width:fit-content;margin-left:auto;margin-right:auto;max-width:70%;}
.box_one li{line-height:1.5rem;font-size:1rem;padding-left:1rem;padding-right:1rem;text-align:left;}
.box_one h3{font-size:1.25rem;padding:0.625rem 0;line-height:1.8rem;margin:0;}
.box_one p{line-height:1.5rem;font-size:1rem;padding-left:1rem;padding-right:1rem;text-align:left;margin-bottom:1rem;}
.box_three{border:1px solid #e8e8e8;overflow:hidden;}
.box_three h3{font-size:1.25rem;padding:0.625rem 0;line-height:1.8rem;margin:0;color:#000b4a;}
.box_three p{margin:0;color:#2c374e;font-size:1rem;line-height:1.5rem;text-align:left;margin-bottom:1rem;}
.box_three li p.btn{padding-top:0.5rem;}
.box_three li{float:left;padding:4% 2%;border-radius:3px;box-sizing:border-box;}
.box_three li{width:33.3%;text-align:center;}
.box_three li span {width:6.25rem;height:6.25rem;margin:0 auto;}
.lineleft{border-left:1px solid #e8e8e8;}
.linesides{border-left:1px solid #e8e8e8;border-right:1px solid #e8e8e8;}
.box_two{max-width:75rem;width:92%;padding:0;overflow:hidden;margin:0 auto;border:1px solid #d7dae3;}
.box_two h3{font-size:1.25rem;padding:0.625rem 0;line-height:1.8rem;margin:0;color:#000b4a;}
.box_two p{margin:0;color:#2c374e;font-size:1rem;line-height:1.5rem;text-align:left;margin-bottom:1rem;}
.box_two li{width:50%;float:left;text-align:left;box-sizing:border-box;padding:4% 2%;}
.box_two li h4{font-size:1.125rem;line-height:1.6rem;font-weight:bold;color:#2c374e;padding:0 0 0.62rem 0;margin:0;}
.box_two li p{color:#2c374e;font-size:1rem;line-height:1.5rem;padding:0;margin:0;width:100%;margin-bottom:1rem;}
.box_two li span{width:8.125rem;height:6.25rem;float:left;margin-bottom:1.5rem;margin:1rem 0 0 0;}
.box_two li.left{border-right:1px solid #d7dae3;}
.box_two li ul li{line-height:1.5rem;font-size:1rem;text-align:left;}
.box_four{text-align:center; max-width:75rem;background:rgba(5,104,170,0.97);}
.box_four li{width:25%;padding:8% 2%;float:left;box-sizing:border-box;background:rgba(5,104,170,0.97);}
.box_four li span{width:7rem; height:7rem;margin:0 auto;margin-bottom:0.62rem;}
.box_four h3{font-size:1.25rem;padding:0.5rem 0 0.62rem 0;margin:0;color:#ffffff;line-height:1.8rem;}
.box_four p{line-height:1.5rem;font-size:1rem;padding:0;margin:0;color:#e9f2ff;margin-bottom:1rem;}
.tips_list{text-align:left;padding:1.875rem 0;}
.tips_list li{width:47%;float:left;list-style:disc;text-align:left;padding:0 0 1.56rem 0;margin-left:3%;}
.tips_list li a{color:#2c374e;}
.tips_list li a:hover{color:#009cff;text-decoration:underline;}
@media (max-width:1200px){.box_two li span{margin-bottom:2rem;}}
@media (max-width:1050px){.box_two li span{margin-bottom:5rem;}}
@media (max-width:960px){.box_three li, .box_two li{width:100%;padding:4%;} .linesides{border:1px solid #e8e8e8;border-left:none;border-right:none;} .box_two li{text-align:left;}.box_two li span{float:none;margin:0 auto;}.box_two li.left{border-right:none;border-bottom:1px solid #d7dae3;}.box_one{max-width:75%;}}
@media (max-width:800px){.box_four li{width:100%;text-align:center;}.box_one{max-width:85%;}}
@media (max-width:600px){.btnside, .btncolour, .button{width:100%;}.btnside{margin:1rem 0 0 0;}.user-reviews li{width:100%;margin-bottom:2rem;} .user-reviews li dl{text-align:left;}.user-reviews li dl dt{float:left;margin:0 0.875rem;} .tips_list li{width:97%;padding:0 0 1.56rem 0.2rem;margin:0;text-align:left;}.box_one{max-width:96%;}}
/******** product  end ********/
/******** footer start ********/
.footer{padding:2rem 4% 1rem 4%;font-size:0.87rem;background-color:#181f25; }
.bottom_list{max-width:75rem;margin: 0 auto;overflow:hidden;}
.products ul, .tutorials ul, .about ul{margin:0;padding:1rem 0 1.25rem 0;  }
.products h3, .tutorials h3, .about h3{font-size:1rem;color:#fff;padding:0;font-weight:normal;margin:0;line-height:1.5rem;}
.products h3 a, .tutorials h3 a, .about h3 a{color:#fff;}
.products h3 a:hover, .tutorials h3 a:hover, .about h3 a:hover{color:#fff;text-decoration:underline;}
.products li, .tutorials li, .about li{padding:0 2% 1rem 0;box-sizing:border-box;}
.products, .tutorials{width:40%;float:left;}
.products li, .tutorials li{float:left;width:50%;}
.about{width:20%;float:left;}
.about li{width:100%;}
.footer a{color:#92a0ab;text-decoration:none;}
.footer a:hover{color:#90a2b0;text-decoration:underline;}
.social{max-width:11rem; margin:0 auto;overflow: hidden;}
.social li{float:left;margin:0 0.62rem;}
.social li span{width:1.5rem;height:1.5rem;background:url("/images/global/social.png") no-repeat;display:block;margin-bottom:0.5rem;}
.social li .facebook{background-position:0rem 0rem;}
.social li .twitter{background-position:-1.5rem 0rem;}
.social li .youtube{background-position:-3rem 0rem;}
.footer p{line-height:1.5rem;text-align:center;color:#92a0ab;clear:both;}
@media (max-width:1030px){.products, .tutorials, .about{width:100%;text-align:center;padding-bottom:2rem;}.about li{width:20%;float:left;}.products li, .tutorials li{width:25%;}}
@media (max-width:750px){.products li, .tutorials li{width:33.3%;}}
@media (max-width:600px){.products li, .tutorials li{width:50%;} .about li{width:33.3%;}}
@media (max-width:500px){.products li, .tutorials li{width:100%;} .about li{width:50%;}}
.goup{background:url("/images/global/top.png") no-repeat -1px;margin:auto;width:45px;height:45px;right:0px;bottom:50px;display:none;position:fixed;cursor:pointer;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
.goup:hover{background:url("/images/global/top.png") no-repeat -49px;}
/******** footer end  ********/