/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&subset=latin-ext');

body{background:url(../img/bg.gif) repeat scroll 0 0 #e6e9ed;font-family:Roboto,Arial,sans-serif;}
.wrapper{max-width:1170px;padding:0 20px;box-sizing:border-box;display:block;margin:0 auto;position:relative;}
h2{font-size:48px;font-weight:300;}

br.mobile{display:none}
.swiper-pagination{display:none}

header{background:#fff;width:100%;padding:15px 0;position:fixed;top:0;left:0;z-index:10}
header .logoWrapper{display:inline-block;}
header .logoWrapper .inforLogo{display:inline-block;width:119px;height:56px;background:url(../img/logoInfor.png) no-repeat scroll 0 0 transparent;}
header .logoWrapper .title{line-height:0.85;font-size:18.32px;display:inline-block;color:#004687;text-transform:uppercase;margin-left:10px;}
header .logoWrapper .title .upper{display:block}
header .logoWrapper .title .lower{display:block;font-size:39.56px;font-weight:900;}
header .mobileMenuButton{display:none}
header ul{text-transform:uppercase;float:right;display:inline-block;margin-top:17px;}
header ul li{display:inline-block;font-size:16px;margin:0 20px;}
header ul li:last-of-type{margin-right:0;}
header ul li a{color:#004687;text-decoration:none}

/* .section1{background:url(../img/bg.jpg) no-repeat scroll center bottom /cover transparent;width:100%;color:#fff;margin-top:80px} */
.section1{background:#004289 url(../img/bgS1.gif) repeat-x 0 0;width:100%;color:#000;margin-top:80px}
.section1 .wrapper{padding-top:50px;padding-bottom:150px;position:relative;}
.section1 .leftWrapper{max-width:1170px;width:100%;}
.section1 .leftWrapper h2{margin-bottom:10px;color:#004289;text-align: center;}
.section1 .leftWrapper p{margin:10px 5px 45px;line-height: 1.2;text-align: center;}
.section1 .leftWrapper p strong{font-weight:700}

.section1 .leftWrapper ul{display:flex; margin:0 -20px;}
.section1 .leftWrapper ul li{flex-direction:row;text-align:center;width:100%;position:relative;}
.section1 .leftWrapper ul li .icon{position:absolute;bottom:-13px;right:12px;display:inline-block;width:94px;height:93px;background:url(../img/icons.png) no-repeat scroll 0 0 transparent;}
.section1 .leftWrapper ul .ew .icon{background-position:-108px 0px;right:12px;}
.section1 .leftWrapper ul .piz .icon{background-position:-216px 0px;right:8px;}
.section1 .leftWrapper ul .wa .icon{background-position:-324px 0px;right:10px;}
.section1 .leftWrapper ul .in .icon{background-position:-432px 0px;right:10px;}
.section1 .leftWrapper ul li .title{display:block;text-transform:uppercase;font-weight:700;margin:0;font-size:14px;color:#004289;}
.section1 .leftWrapper ul li .shopIcon{margin:5px auto;display:block;width:95px;height:33px;background:url(../img/sprite.png) no-repeat scroll 0 0 transparent}
.section1 .leftWrapper ul li .shopIcon.gp{background-position:0 -158px}
.section1 .leftWrapper ul li .shopIcon.as{background-position:0 -199px}

.section1 .leftWrapper ul li span:after{content:""; display: inline-block; background: url(../img/screeny.gif) no-repeat 0 0 transparent;width:175px;height:357px; margin-top: 20px;}
.section1 .leftWrapper ul .ap span:after{background-position: 0 0;}
.section1 .leftWrapper ul .ew span:after{background-position: -245px 0;}
.section1 .leftWrapper ul .piz span:after{background-position: -490px 0;margin-left: 10px;}
.section1 .leftWrapper ul .wa span:after{background-position: -735px 0;}
.section1 .leftWrapper ul .in span:after{background-position: -968px 0;}

.section1 .leftWrapper .buttonsWrapper{position:absolute;right:12px;bottom:-98px;}

.section2{background:#fff;}
.section2 .wrapper{text-align:center;padding-top:50px;padding-bottom:80px}
.section2 h2{color:#004687;margin-bottom:60px;}
.section2 .swiper-container{width:960px}
.section2 li{display:inline-block;vertical-align:top;position:relative;padding-bottom:55px;width:220px}
.section2 li .icon{height:153px;width:145px;background:url(../img/sprite.png) no-repeat 0 0 transparent;display:inline-block;}
.section2 li.uptodate .icon{background-position:0 -307px}
.section2 li.access .icon{background-position:-155px -307px}
.section2 li.savetime .icon{background-position:-312px -307px}
.section2 li.helpdesk .icon{background-position:-467px -307px}
.section2 li span{display:block;text-transform:uppercase;font-size:20px;margin-top:20px;width:210px;position:absolute;left:50%;bottom:0;margin-left:-105px;}
.swiper-pagination{display:none}

.section3{background-color:#f7f7f7;}
.section3 .wrapper{padding-top:60px;padding-bottom:80px;text-align:center;}
.section3 h2{color:#004687;margin-bottom:60px;}
.section3 .swiper-container{width:1020px;}
.section3 ul{font-size:0;padding:0 15px 144px}
.section3 li{display:inline-block;vertical-align:middle;}
.section3 li.number{width:198px;position:relative}
.section3 li.number:first-child, .section3 li.number:last-child{width:294px}
.section3 li .text{font-size:14px;width:150px;text-align:center;position:absolute;top:88px;left:50%;text-shadow:none;color:#000;margin-left:-75px}
.section3 .line{height:4px;width:64px;background:#aec6d6;position:relative;display:inline-block;vertical-align:middle}
.section3 .line.start, .section3 .line.end{width:160px}
.section3 .line.start:before{display:inline-block;position:absolute;left:0;top:-7px;height:17px;width:17px;background:#aec6d6;content:"";border-radius:100%;}
.section3 .line.start span{font-size:14px;font-weight:700;color:#aec6d6;position:absolute;left:-11px;bottom:-69px;text-transform:uppercase;}
.section3 .line.end:before{display:inline-block;position:absolute;right:0;top:-7px;height:17px;width:17px;background:#aec6d6;content:"";border-radius:100%;}
.section3 .line.end span{font-size:14px;font-weight:700;color:#aec6d6;position:absolute;right:-17px;bottom:-69px;text-transform:uppercase;}
.section3 li.number .circle{display:inline-block;vertical-align:middle;margin:0 4px;font-size:35px;font-weight:700;width:62px;height:62px;background:#aec6d6;padding:12px 0;box-sizing:border-box;border-radius:100%;color:#fff;text-shadow:0px -1px 0 #86a6bd;position:relative}
.section3 .button{display:inline-block;vertical-align:middle;margin:5px auto;display:block;width:95px;height:33px;background:url(../img/sprite.png) no-repeat scroll 0 0 transparent}
.section3 .button.gp{background-position:0 -158px}
.section3 .button.as{background-position:0 -199px}

.section4{background:#e6e9ed url(../img/bgS4.jpg) no-repeat scroll center bottom / cover;padding:70px 0;color:#004687;}
.section4 h3{margin-bottom:60px;font-size:42px;line-height:1.2;margin-bottom:12px;}
.section4 p{font-size:20px;margin-bottom: 20px;}
.section4 a.button{display:inline-block;background-color:#004687;color:#fff;text-decoration:none;font-size:18px;text-transform:uppercase;padding:15px 30px;}

footer{background:#004687;color:#fff;font-size:12px;padding:50px 0;font-weight:300}
footer .copyright{display:inline-block;text-transform:uppercase;}
footer .copyright .inforLogo{display:inline-block;width:77px;height:29px;background:url(../img/sprite.png) no-repeat scroll -135px 0 transparent;margin-right:15px;}
footer .copyright span{display:inline-block;}
footer .bok{display:inline-block;float:right;margin-top:18px;}
footer .bok strong{font-weight:700}
footer .bok a{color:#fff;text-decoration:none}

@media screen and (max-width:1020px){
    .swiper-pagination{display:block}
    .swiper-pagination-bullet{opacity:1;background-color:#adc6d7}
    .swiper-pagination-bullet-active{background-color:#004489}
    
    body{min-width:320px;font-size:14.2px;}
    h2, .section4 h3{font-size:28px;}
    br.mobile{display:block}    
    
    header .logoWrapper .inforLogo{background-position:right 0;width:68px;height: 32px;}
    header .logoWrapper .title{font-size:12.4px;}
    header .logoWrapper .title .lower{font-size:26.76px}
    
    header .mobileMenuButton{display:inline-block;float:right;margin-top:3px;cursor:pointer;}
    header .mobileMenuButton span{display:block;width:30px;height:4px;margin:4px 0;background:#004489}
    header ul{text-align:center;display:none;position:absolute;top:32px;left:0;width:100%;background:#fff;box-shadow:0px 15px 10px -10px rgba(0,0,0,0.2) inset}
    header ul.showed{display:inline-block;}
    header ul li{display:block;margin:0;padding:15px 0;border-bottom:1px solid #e4e4e4}

    .section1 {background-color:#e0ecf4;margin-top: 64px;}
    .section1 .leftWrapper ul{flex-direction:column;}
    .section1 .leftWrapper ul li{display:block;width:214px;position:relative;margin:0 auto 140px;}
    .section1 .leftWrapper ul li:last-child{margin-bottom:0;}
    .section1 .leftWrapper ul .piz span:after {margin-left: 0;}

    .section2 .swiper-container{width:auto}
    .section2 .wrapper{padding-top:30px;padding-bottom:20px;}
    .section2 .swiper-wrapper{padding-bottom:46px;}
    
    .section3 .wrapper{padding-top:30px;padding-bottom:20px;}
    .section3 .swiper-container{width:198px;}
    .section3 ul{padding:0 0 170px}
    .section3 .button{display:none}
    .section3 .line.start, .section3 .line.end{width:64px}
    .section3 .line.start span, .section3 .line.end span{display:none}
    .section3 .line.start::before,.section3 .line.end::before {display:none}
    
    .section4{background:transparent;padding:20px 0;margin:0 auto;text-align: center;}
    .section4 p{font-size:14px;}
    
    footer{text-align:center;padding:20px 0}
    footer .bok{float:none}
}