/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal; }
a{ text-decoration: none; }
a:hover{ color: #6087c0; }
body,textarea,input,button,select,keygen,legend{font:12px/1.14 "微软雅黑",\5b8b\4f53;color:#333;outline:0;}
body{background:#000; overflow-x:hidden; font-family: "微软雅黑"; }

.clearfloat{ zoom:1;}
.clearfloat:after{ content: ""; display: block; clear: both;}
*:focus{ outline: none; }



/* 通用顶部导航 */
.g-nav{ width: 100%; margin: 0 auto; position: fixed; top: 0; left: 0; z-index: 9999; height: 40px; background: #1a7ab3 url(../images/gnav_bg.png) center center no-repeat; background-size: auto 50%;  }
.g-nav .home{ width: 40px; height: 40px; position: absolute; left: 0; top: 0; background: url(../images/ico_home.jpg) left center no-repeat; background-size: 80% 80%; }
.g-nav .menu{ width: 50px; height: 40px; position: absolute; right: 0; top: 0; background: url(../images/ico_menu.jpg) center right no-repeat; background-size: 80% 80%; }
.g-nav .home a{ display: block; width: 100%; height: 100%; }


/* 封面 */
.cover1{ max-width: 640px; height: 2715px; margin: 0 auto;  }
.cover1 .sec1{ height: 1291px; position: relative; }
.cover1 .sec2{ height: 917px; position: relative; }
.cover1 .sec3{ height: 507px; position: relative; }
.cover1 img{ display: block; width: 100%; height: 100%; }
.cover1 span{ display: block; width: 200px; height: 150px; position: absolute; z-index: 2; }
.cover1 span a{ display: block; width: 100%; height: 100%; }
.cover1 .btn1{ top: 130px; left: 10%; }
.cover1 .btn2{ top: 460px; right: 10%; }
.cover1 .btn3{ top: 750px; left: 10%; }
.cover1 .btn4{ top: 1050px; left: 35%; }
.cover1 .btn5{ top: 80px; left: 10%; }
.cover1 .btn6{ top: 400px; left: 35%; }
.cover1 .btn7{ top: 700px; left: 10%; }

.cover2{ max-width: 640px; height: 1498px; margin: 0 auto;  }
.cover2 .sec1{ height: 948px; position: relative; }
.cover2 .sec2{ height: 550px; position: relative; }
.cover2 img{ display: block; width: 100%; height: 100%; }
.cover2 span{ display: block; width: 250px; height: 200px;  position: absolute; z-index: 2;}
.cover2 span a{ display: block; width: 100%; height: 100%; }
.cover2 .btn1{ top: 130px; left: 10%; }
.cover2 .btn2{ top: 455px; right: 10%; }
.cover2 .btn3{ top: 750px; left: 5%; }

.cover3{ max-width: 640px; height: 1498px; margin: 0 auto;  }
.cover3 .sec1{ height: 966px; position: relative; }
.cover3 .sec2{ height: 532px; position: relative; }
.cover3 img{ display: block; width: 100%; height: 100%; }
.cover3 span{ display: block; width: 200px; height: 150px; position: absolute; z-index: 2; }
.cover3 span a{ display: block; width: 100%; height: 100%; }
.cover3 .btn1{ top: 200px; left: 10%; }
.cover3 .btn2{ top: 505px; right: 10%; }
.cover3 .btn3{ top: 805px; left: 10%; }

.cover4{ max-width: 640px; height: 946px; margin: 0 auto;  }
.cover4 .sec1{ height: 946px; position: relative; }
.cover4 img{ display: block; width: 100%; height: 100%; }
.cover4 span{ display: block; width: 200px; height: 150px; position: absolute; z-index: 2; }
.cover4 span a{ display: block; width: 100%; height: 100%; }
.cover4 .btn1{ top: 220px; left: 10%; }
.cover4 .btn2{ top: 505px; right: 10%; }


/* 目录页 */
.direct{ max-width: 640px; margin: 0 auto; background: #fff; overflow: hidden; }
.direct .section1{ background: url(../images/mulu/di_bg.png) repeat; }
.direct .section2{ background: url(../images/mulu/di_bg.png) repeat; }
.direct .section1 .sec1{ max-width: 640px; height: 100%; margin: 0 auto; position: relative; }
.direct .section2 .sec1{ max-width: 640px; height: 100%; margin: 0 auto; position: relative; }

.direct .section1 .sec1 .area0{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 9; }
.direct .section1 .sec1 .area0 img{ display: block; width: 100%; height: 100%; }
.direct .section1 .sec1 .area1{ width: 100%; height: 100%; }
.direct .section1 .sec1 .area2{ width: 100%; height: 100%; }
.direct .section1 .sec1 .area3{ width: 100%; height: 100%; }

.direct .section1 .sec1 .btn0{ display: block; width: 75px; height: 75px; position: absolute; z-index: 999; }
.direct .section1 .sec1 .btn1{ background: url(../images/mulu/btn1.png) center center no-repeat; background-size: auto 60%; left: 35%; top: 130px; }
.direct .section1 .sec1 .btn2{ background: url(../images/mulu/btn2.png) center center no-repeat; background-size: auto 60%; left: 47%; bottom: 135px; }
.direct .section1 .sec1 .btn3{ background: url(../images/mulu/btn3.png) center center no-repeat; background-size: auto 60%; right: 10%; top: 130px; }
.direct .section1 .sec1 .btn3 a{ display: block; width: 100%; height: 100%; }

.direct .section1 .link{ width: 200px; height: 100px; position: absolute; z-index: 99999; top: 30%; left: 48%; display: none; }
.direct .section1 .link li{ text-align: center; line-height: 50px; height: 50px; background: url(../images/home/line.png) center bottom no-repeat;}
.direct .section1 .link a{ color: #000; font-size: 14px; font-weight: bold; }

.direct .section1 .link1 .li1{ width: 130px; margin-left: 0px; }
.direct .section1 .link1 .li2{ width: 130px; margin-left: -25px; }
.direct .section1 .link1 .li3{ width: 130px; margin-left: -60px; }
.direct .section1 .link1 .li4{ width: 130px; margin-left: -90px; }

.direct .section1 .link2 .li1{ width: 130px; margin-left: 0px; }
.direct .section1 .link2 .li2{ width: 130px; margin-left: -40px; }

.move{ width: 125px; height: 65px; position: absolute; bottom: 0; z-index: 9999999999; background: url(../images/mulu/move.png) center center no-repeat; background-size: 80% 80%; left: 50%; margin-left: -62px; }


/* 宇通之道 */
.city{ max-width: 640px; margin: 0 auto; background: #fff; }
.city .controlArrow{ width: 15px!important; height: 24px!important; border: none; }
.city .prev{ background: url(../images/city/prev_bg.png) no-repeat; }
.city .next{ background: url(../images/city/next_bg.png) no-repeat; }

.city .slide0{ max-width: 640px; height: 100%; margin: 0 auto;   }
.city .slide1{ background: url(../images/mulu/di_bg.png) repeat; }
.city .slide1 .sec1{ height: 30px; padding: 10% 10%; font-weight: bold; line-height: 30px; color: #4487cd; font-size: 18px; }
.city .slide1 .sec2{ width: 280px; height: 227px; margin: 0 auto; position: relative; }
.city .slide1 .sec2 .btn0{ width: 50px; height: 24px; line-height: 24px; font-style: italic; font-weight: bold; text-align: center; color: #000; font-size: 14px; position: absolute; }
.city .slide1 .sec2 .btn1{ top: 50px; right: 20px; }
.city .slide1 .sec2 .btn2{ top: 109px; left: 137px; }
.city .slide1 .sec2 .btn3{ top: 153px; left: 232px; }

.city .slide1 .sec2 img{ display: block; width: 100%; height: 100%; }
.city .slide1 .sec3{ padding: 8% 10%; font-size: 12px; color: #4e4e4e; line-height: 22px; }

.city .slide2 .sec1{ width: 60%; border-bottom: 3px solid #82ce20; height: 30px; padding: 5% 8%; font-weight: bold; line-height: 30px; color: #4487cd; font-size: 18px; }
.city .slide2 .sec2{ padding: 10px; text-align: justify; font-size: 16px; line-height: 24px; color: #4487cd; width: 70%; height: 30%; border: 2px solid #4487cd; border-radius: 5px; margin: 5% auto; }
.city .slide2 .sec3 img{ display: block; width: 100%; }

.city .slide3{ background: url(../images/mulu/di_bg.png) repeat; }
.city .slide3 img{ display: block; width: 100%; }

.city .sec3{ max-width: 640px; position: relative; }
.city .sec3 .hd{  height: 10px; position: absolute; bottom: 20px; z-index: 999; width: 40px; left: 50%; margin-left: -20px; }
.city .sec3 .hd li{ width: 10px; height: 10px; overflow: hidden; text-indent: 200px; float: left; display: inline-block; margin-right: 10px; border-radius: 5px; background: #4489ce; }
.city .sec3 .hd li.on{  background: #09539d; }
.city .sec3 .bd{ overflow: hidden; z-index: 1; }
.city .sec3 .bd img{ display: block; width: 100%; }









.city .slide3 .sec1{  height: 30px; padding: 10% 0; text-align: center; font-weight: bold; line-height: 30px; color: #4487cd; font-size: 18px; }
.city .slide3 .sec2{ margin-top: 50px; }
.city .slide3 .sec2 .p0{ text-align: center; margin-top: 20px; height: 24px; }
.city .slide3 .sec2 .p0 span{ display: inline-block; width: 60px; height: 24px; line-height: 24px; font-size: 14px; text-align: center;}
.city .slide3 .sec2 .p1 input{ display: inline-block; height: 24px; width: 120px; padding:0 5px; line-height: 24px; border: 1px solid #4487cd; border-radius: 5px; }
.city .slide3 .sec2 .p2 input{ border: none; border-radius: 5px; margin-left: 20px; display: inline-block; width: 70px; height: 24px; line-height: 24px; text-align: center; background: #4487cd; color: #fff; }
.city .slide3 .sec2 .p2{ height: 24px; margin-top: 20px; }

.city2{ max-width: 640px; margin: 0 auto; padding-top: 40px;  background: #fff url(../images/mulu/di_bg.png) repeat; }
.city2 .sec1{ width: 60%; border-bottom: 3px solid #82ce20; height: 30px; padding: 5% 8%; font-weight: bold; line-height: 30px; color: #4487cd; font-size: 24px; }
.city2 .sec2{ padding: 10px; text-align: justify; font-size: 16px; line-height: 24px; color: #4487cd; width: 70%; border: 1px solid #bbb; border-radius: 5px; margin: 15% auto; }

.city2 .sec2 h2{ font-weight: bold; }
.city2 .sec2 p{ color: #333; }


.city2 .sec3{ max-width: 640px; position: relative; }
.city2 .sec3 .hd{  height: 10px; position: absolute; bottom: 20px; z-index: 999; width: 40px; left: 50%; margin-left: -20px; }
.city2 .sec3 .hd li{ width: 10px; height: 10px; overflow: hidden; text-indent: 200px; float: left; display: inline-block; margin-right: 10px; border-radius: 5px; background: #4489ce; }
.city2 .sec3 .hd li.on{  background: #09539d; }
.city2 .sec3 .bd{ overflow: hidden; z-index: 1; }
.city2 .sec3 .bd img{ display: block; width: 100%; }


/* 产品展示 */
.show{ padding-top: 40px; max-width: 640px; margin: 0 auto; background: #fff; }
.show .title{ padding-left: 20px; color: #4487cd; height: 60px; line-height: 60px; font-weight: bold; font-size: 24px;  }
.show .sec1{ height: 40px; background: #e4e4e4; margin-bottom: 50px; }
.show .sec1 li{ width: 50%; font-size: 14px; height: 40px; border-bottom: 1px solid #4487cd; float: left; line-height: 40px; text-align: center; font-weight: bold; }
.show .sec1 li a{ height: 60px; display: block; width: 100%; color: #fff; font-weight: bold; }
.show .sec1 li.on{ background: #4487cd; }
.show .sec1 li.on a{ color: #fff; background: url(../images/show/arrow.png) center bottom no-repeat; }

.show .sec2 ul{ width: 320px; position: relative; left:50%; margin-left: -160px; text-align: center; }
.show .sec2 ul:after{ content: ""; display: block; clear: both; }
.show .sec2 li{ width: 150px; display: inline-block; margin-bottom: 20px; margin-left: 10px; float: left; }
.show .sec2 .image{ width: 148px; height: 80px; border: 1px solid #bbb; }
.show .sec2 .image img{ display: block; width: 100%; height: 100%; }
.show .sec2 .txt{ width: 148px; border: 1px solid #bbb; border-top: none; }
.show .sec2 .txt h1{ height: 40px; line-height: 40px; font-size: 16px; text-align: center; font-weight: bold; }
.show .sec2 .txt p{ height: 48px; text-align: center; font-size: 14px; line-height: 24px; }
.show .sec2 .txt .chat{ padding-left: 30px; margin: 0 auto; width: 100px; height: 28px; background: url(../images/show/ico_chat.png) 25% center no-repeat; background-size: auto 60%; }
.show .sec2 .txt .chat a{ display: block; text-align: center; color: #4487cd; font-size: 14px; line-height: 28px;}

.show-video{ width: 320px; height: 200px; margin: 20px auto; padding-bottom: 20px; }
.v0{ width: 320px; height: 200px; text-align: center; margin: 0 auto; padding-bottom: 20px; }




/* 解决方案 */
.solution{ max-width: 640px; position: relative; margin: 0 auto; background: #fff; }
.solution img{ width: 100%; height: 100%; display: block; }



/* 产品中心 */
.page0{ max-width: 640px; margin: 0 auto; padding-top: 40px; background: #fff; }
.page0 img{ display: block; width: 100%; }


/* 侧边导航 */
.sideNav{ width: 160px; line-height: 40px; background: #0e3068; color: #fff; position: fixed; z-index: 9999;  top: 40px; right: -220px; }
.sideNav a{ font-size: 14px; color: #fff; }
.sideNav dt{ font-size: 18px; padding-left: 20px;  background: url(../images/nav_line.png) center bottom no-repeat; }
.sideNav dt span{ font-size: 20px; }

.sideNav dd{ padding-left: 40px;  background: url(../images/nav_line.png) center bottom no-repeat; }
.sideNav dd a{ color: #bbb; }



.conList0{ display: none; width: 242px; height: 200px; position: fixed; top: 50%; left: 50%; z-index: 9999; margin: -100px 0 0 -121px;  }
.conList0 .bd{ width: 242px; }
.conList0 li{ width: 240px; height: 200px; }
.conList0 li img{ display: block; width: 100%;  height: 100%; }

.conList0 .button{ display: block; width: 15px; height: 24px; position: absolute; top: 50%; margin-top: -12px; z-index: 999; }
.conList0 .prev{ left: 10px; background: url(../images/thumb/a1.jpg) no-repeat; }
.conList0 .next{ right: 10px; background: url(../images/thumb/a2.jpg) no-repeat; }

.conList0 .close{ width: 15px; height: 15px; background: url(../images/thumb/close.jpg) no-repeat; background-size: cover; position: absolute; top: -10px; right: -10px; z-index: 99; }

.conBox .opacity{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; }


/* 解决方案 */
.solution{ position: relative; }
.solution img{ display: block;  width: 100%; }

.solution .sec0{ width: 120px; height: 40px; position: absolute;  }
.solution .sec0 img{ display: block; width: 100%; height: 100%; }

.solution .sec1{ left: 30px; top: 160px; }
.solution .sec2{ right: 20px; top: 160px; }
.solution .sec3{ left: 30px; bottom: 20px; }
.solution .sec4{ right: 10px; bottom: 30px; }

.s1{ display: none; border-radius: 10px; z-index: 999; width: 250px; padding: 15px; background: #1a7ab3; border: 1px solid #fff; top: 80px; position: absolute; left: 50%; margin-left: -145px; }
.s1 h2{ font-size: 18px; font-weight: bold; color: #fff; }
.s1 p{ margin-top: 15px; font-size: 14px; color: #fff; line-height: 24px; }

.s1 .close{ position: absolute; right: -10px; top: -10px; font-size: 14px; line-height: 30px; text-align: center; width: 30px; height: 30px; border-radius: 15px; background: #fff; color: #000; }