* { font-family: 'Microsoft YaHei'; }
body { padding: 0px; margin: 0px; }
a { text-decoration: none; }
.ClearFloat { clear: both; }
.CenterDIV { margin-right: auto; margin-left: auto; }
.Center { text-align: center; }
.Relative { position: relative; }
.PageWidth { width: 1100px; margin-right: auto; margin-left: auto; position: relative; }
#PageHeaderDIV { background-color: #3091E9; height: 500px; background-image: url(../image/banner.png); background-size: cover; background-position: left top; }
.BannerBgDIV { position: absolute; width: 410px; height: 300px; background-image: url(../image/bannerbg.png); top: 100px; right: 0px; background-repeat: no-repeat; }
#PageHeaderInnerDIV * { color: #fff; }
#PageHeaderInnerDIV .Slogan { font-size: 28px; font-weight: 400; }
#PageBottomDIV { padding: 30px; background-color: #2B2B2B; text-align: center; font-size: 12px; color: #fff; }
#PageBottomDIV div { opacity: 0.2; }
.PageSection, .PageSectionGrey { padding-top: 10px; padding-bottom: 10px; }
.PageSectionGrey { background-color: #F8F8F8; }
.PageSectionLeftDIV { width: 50%; float: left; }
.PageSectionRightDIV { width: 50%; float: left; }
.SectionContent { margin-top: 50px; }
.SectionContent .TitleDIV { font-size: 20px; color: #666; font-weight: bold; }
.SectionContent strong { font-size: 24px; }
.SectionContent .DescriptionDIV { color: #999; font-size: 13px; }
.SectionContent .DescriptionDIV div { margin-top: 5px; line-height: 24px; }
.SectionContent .DescriptionDIV .AdditionalInfoDIV { opacity: 0.8; margin-top: 20px; margin-bottom: 20px; font-size: 12px; }
.SectionContent .ButtonDIV { margin-top: 40px; }
.SectionContent .ButtonDIV a { background-color: #F43E3A; color: #fff; padding: 10px 30px; border-radius: 20px; font-size: 14px; }
#PageRightContentSliderDIV { position: absolute; top: 0px; right: 0px; height: 100%; background-color: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); z-index: 11000; }
.Hidden { display: none; }
#PopupShowTipDIV { position: fixed; left: 50%; top: 50%; display: none; z-index: 999999; min-width: 200px; text-align: center; padding: 10px; font-size: 12px; border-radius: 5px; border: 1px solid green; font-weight: bold; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 10px rgba(0, 0, 0, 0.3); }
#PopupShowTipDIV.alert-success { color1: #3c763d; background-color1: #dff0d8; border-color1: #d6e9c6; background-color: #fff; padding: 12px; font-size: 14px; border: 1px solid #fff; color: green !important; background-image: url(../image/icon_workflow_approve.png); background-repeat: no-repeat; background-position: 10px center; padding-left: 40px; text-align: left; }
#PopupShowTipDIV.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
#PopupShowTipDIV.alert-info { color: #fff; background-color: #000; border-color: #000; opacity: 0.8; }
#PopupShowTipDIV.alert-warning { color: #FA5C06; background-color: #fcf8e3; border-color: #faebcc; }


/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */ margin: 0; padding: 0; }

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ }

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; }
/* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }
/* 统一等宽字体 */
small { font-size: 12px; }
/* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; }
q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; }
/* for ie6 */
fieldset, img { border: none; }
/* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ }
/* 重置表格元素 */
table { border-collapse: collapse; border-spacing: 0; }
/* 重置 hr */
hr { border: none; height: 1px; }
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
@charset "utf-8";
/* CSS Document */
body { width: 100%; background: none; overflow-x: hidden; }
.bg { background: #6B88B5; height: 900px; }


/* 首页头部开始 */
.header-item { position: relative; }
.index-site-header { width: 100%; margin: 0 auto; background-color: rgba(26,28,30,0.1); height: 70px; position: absolute; left: 0; right: 0; top: 0; z-index: 10000; }
.index-menu-area { height: 70px; width: 100%; margin: 0 auto; position: relative; }
.index-menu-area h1 { position: absolute; top: 7px; padding-left: 2%; }


.index-nav { width: 850px; float: right; padding-right: 2%; }
.index-menu { float: left; font-size: 0; }
.index-menu li { display: inline-block; }
.index-menu li a { padding: 25px 15px; font-size: 16px; color: #ffffff; font-family: Microsoft YaHei; text-decoration: none; line-height: 70px; }
.index-menu a:hover { background: #ff8f0b; }

.index-login a, .index-regedit a { text-decoration: none; color: #FFFFFF; width: 80px; height: 30px; display: inline-block; font-size: 16px; text-align: center; line-height: 30px; border: 1px solid #FFFFFF; border-radius: 15px; float: right; font-family: Microsoft YaHei; margin-right: 2%; margin-top: 20px; }
.index-regedit a:hover { border: 1px solid #ff8f0b; color: #FFFFFF; background: #ff8f0b; }
.index-login a:hover { border: 1px solid #078be4; color: #FFFFFF; background: #078be4; }

/* banner开始 */

.oUlplay { height: 900px; position: relative; display: none; position: absolute; }

.oUlplay { display: block; width: 100%; height: 900px; overflow: hidden; }
.oUlplay { position: relative; }

.t-banner { background: url(../image/banner1.png) center no-repeat; background-size: cover; }
.f-banner { background: url(../image/banner2.png) center no-repeat; background-size: cover; }
.s-banner { background: url(../image/banner3.png) center no-repeat; background-size: cover; }



.button1 a { text-decoration: none; width: 164px; height: 50px; font-size: 30px; text-align: center; line-height: 50px; border-radius: 10px; border: solid 1px #333333; font-family: Microsoft YaHei; color: #333333; float: left; margin-left: 177px; }
.button2 a { text-decoration: none; width: 164px; height: 50px; font-size: 30px; text-align: center; line-height: 50px; border-radius: 10px; border: solid 1px #ffffff; font-family: Microsoft YaHei; font-family: Microsoft YaHei; color: #fff; position: absolute; margin: auto; top: 140px; left: 0; bottom: 0; right: 0; }

.button3 a { text-decoration: none; width: 164px; height: 50px; font-size: 30px; text-align: center; line-height: 50px; border-radius: 10px; border: solid 1px #ffffff; font-family: Microsoft YaHei; font-family: Microsoft YaHei; color: #fff; position: absolute; margin: auto; top: 380px; left: 0; bottom: 0; right: 0; }

.button4 a { text-decoration: none; width: 164px; height: 50px; font-size: 30px; text-align: center; line-height: 50px; border-radius: 10px; border: solid 1px #595959; font-family: Microsoft YaHei; color: #595959; float: left; margin-left: 250px; }

.banner-button-f-banner a { text-decoration: none; width: 174px; font-size: 26px; text-align: center; line-height: 36px; border-radius: 10px; border: solid 1px #595959; font-family: Microsoft YaHei; color: #595959; float: left; margin-left: 155px; margin-top: 40px; padding: 10px 30px; }
.banner-button-s-banner a { text-decoration: none; width: 174px; font-size: 26px; text-align: center; line-height: 36px; border-radius: 10px; border: solid 1px #ffffff; font-family: Microsoft YaHei; color: #ffffff; float: left; margin: auto; margin-left: 200px; padding: 10px 30px; }
.banner-button-t-banner a { text-decoration: none; width: 174px; font-size: 26px; text-align: center; line-height: 36px; border-radius: 10px; border: solid 1px #ffffff; font-family: Microsoft YaHei; color: #ffffff; float: left; margin: auto; margin-left: 260px; padding: 10px 30px; }



.top_slide_wrap { width: 100%; height: 1000px; overflow: hidden; position: relative; z-index: 1; margin-top: -81px; }
.slide_box { height: 1000px; overflow: hidden; }
.slide_box li { height: 1000px; }
.slide_box img { width: 100%; height: 1000px; }

.op_btns { width: 100%; margin: -700px auto 0; position: relative; z-index: 3; }
.op_btns .op_btn { display: block; width: 62px; height: 62px; cursor: pointer; overflow: hidden; position: absolute; margin-top: 240px; }
.op_btns .op_prev { left: 50px; }
.op_btns .op_next { right: 50px; }

.op_btns .op_prev { background: url(../image/left.png) no-repeat center; filter: alpha(Opacity=60); -moz-opacity: 0.3; opacity: 0.3; }
.op_btns .op_prev:hover { filter: alpha(Opacity=100); -moz-opacity: 1; opacity: 1; }
.op_btns .op_next { background: url(../image/right.png) no-repeat center; filter: alpha(Opacity=60); -moz-opacity: 0.3; opacity: 0.3; }
.op_btns .op_next:hover { filter: alpha(Opacity=100); -moz-opacity: 1; opacity: 1; }
.op_bars { width: 980px; margin: 220px auto 0; position: relative; z-index: 4; text-align: center; }
.op_bars .op_bar { display: inline-block; width: 12px; height: 12px; background: url("icons_cb372887.png") no-repeat -116px -90px; margin: 0 4px; }
.op_bars .op_cur { background-position: 0 -90px; }




.banner { width: 100%; position: relative; overflow: hidden; z-index: 100; }
.pre, .next { width: 30px; height: 50px; position: absolute; top: 360px; display: block; text-decoration: none; display: none; z-index: 300; }
.pre { left: 40px; background: url(../imges/left.png) no-repeat; filter: alpha(Opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
.next { right: 40px; background: url(../imges/right.png) no-repeat; filter: alpha(Opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
.top_slide_wrap:hover .op_btns clearfix { display: block; }
.top_slide_wrap:hover .op_btns .op_next { display: block; }
.pre:hover { filter: alpha(Opacity=100); -moz-opacity: 1; opacity: 1; }
.next:hover { filter: alpha(Opacity=100); -moz-opacity: 1; opacity: 1; }
.f-banner { height: 900px; background: url(../image/banner1.png) center no-repeat; position: relative; background-size: cover; }
.p-f-banner { height: 300px; width: 500px; overflow: auto; margin: auto; position: absolute; top: -100px; left: 0; bottom: 0; right: 0; font-weight: 300; }
.p1-f-banner { width: 500px; height: 140px; font-size: 45px; color: #595959; font-family: Microsoft YaHei; text-align: center; line-height: 60px; }
.p2-f-banner { width: 500px; height: 50px; font-size: 18px; color: #595959; font-family: Microsoft YaHei; text-align: center; line-height: 30px; }

.s-banner { height: 900px; background: url(../image/banner3.png) center no-repeat; position: relative; background-size: cover; }
.p-s-banner { height: 400px; width: 560px; overflow: auto; margin: auto; position: absolute; top: -60px; left: 0; bottom: 0; right: 0; font-weight: 300; }
.p1-s-banner { width: 560px; height: 200px; font-size: 45px; color: #fff; font-family: Microsoft YaHei; text-align: center; line-height: 80px; }

.t-banner { height: 900px; background: url(../image/banner2.png) center no-repeat; position: relative; background-size: cover; }
.p-t-banner { height: 300px; width: 700px; margin: auto; position: absolute; top: -100px; left: 0; bottom: 0; right: 0; }
.p1-t-banner { width: 700px; height: 200px; font-size: 45px; color: #fff; font-family: Microsoft YaHei; font-weight: 300; text-align: center; line-height: 80px; }

.function { background: rgba(255,255,255,0); position: absolute; transition: 1s; height: 275px; width: 100%; top: 935px; z-index: 200; }
.function-box1, .function-box2, .function-box3, .function-box4 { width: 24.9%; height: 228px; float: left; margin-top: 23px; border-right: solid 1px #32414f; position: relative; }
.function-box4 { width: 24.9%; border: none; }
.box1-icon, .box2-icon, .box3-icon, .box4-icon { overflow: auto; margin: auto; position: absolute; top: 40px; left: 0; bottom: 0; right: 0; }
.function p { font-size: 30px; color: #31414e; font-family: Microsoft YaHei; text-align: center; padding-top: 120px; }
.banner:hover .function { top: 675px; background: rgba(255,255,255,0.9); }

/* 内容开始 */
.content1 { width: 100%; height: 1030px; background: url(../image/content1-bg1.png) center; background-size: cover; }
#bgcontent { width: 80%; height: 1030px; margin: auto; background: url(../imges/content1.png) no-repeat left center; }
.p-content1 { width: 550px; height: 225px; float: right; padding-top: 300px; }
.p1-content1 { width: 550px; height: 48px; font-size: 48px; color: #333333; font-family: Microsoft YaHei; text-align: center; }
.p2-content1 { width: 550px; height: 50px; font-size: 18px; color: #333333; padding-top: 40px; padding-bottom: 40px; font-family: Microsoft YaHei; text-align: center; line-height: 30px; }


.content2 { width: 100%; height: 1030px; background: #0e0e0e url(../image/content2.png) no-repeat bottom; position: relative; }
.p-content2 { width: 700px; height: 280px; overflow: auto; margin: auto; position: absolute; top: -350px; left: 0; bottom: 0; right: 0; }
.p1-content2 { width: 700px; height: 48px; font-size: 48px; color: #fff; font-family: Microsoft YaHei; text-align: center; }
.p2-content2 { width: 700px; height: 50px; font-size: 18px; color: #fff; padding-top: 40px; padding-bottom: 40px; font-family: Microsoft YaHei; text-align: center; line-height: 30px; }


.content3 { width: 100%; height: 1030px; background: #1f89cb; position: relative; }

.bg-content3 { width: 100%; height: 1030px; background: url(../imges/content3-1.png) center top no-repeat; margin: 0 auto; }
.p-content3 { width: 500px; height: 300px; margin: 0 auto; padding-top: 500px; }
.p1-content3 { height: 48px; font-size: 48px; color: #ffffff; font-family: Microsoft YaHei; text-align: left; text-align: center; }
.p2-content3 { height: 50px; font-size: 18px; color: #ffffff; padding-top: 40px; padding-bottom: 40px; font-family: Microsoft YaHei; text-align: center; line-height: 30px; }


.content4 { width: 100%; height: 1030px; background: #f9fbfd url(../imges/content4-22.png) no-repeat right; }
.p-content4 { width: 1200px; height: 280px; overflow: auto; margin: auto; padding-top: 300px; }
.p1-content4 { width: 700px; height: 48px; font-size: 48px; color: #595959; font-family: Microsoft YaHei; text-align: center; }
.p2-content4 { width: 700px; height: 50px; font-size: 18px; color: #595959; padding-top: 40px; padding-bottom: 40px; font-family: Microsoft YaHei; text-align: center; line-height: 30px; }

.FunctionListDIV { font-size: 15px; margin-top: 20px; }
.FunctionListDIV span { margin-left: 10px; margin-right: 10px; text-decoration: underline; }
.Button2, .Button2:hover { text-decoration: none; width: 164px; height: 50px; font-size: 26px; text-align: center; line-height: 50px; border-radius: 10px; border: solid 1px #ffffff; font-family: Microsoft YaHei; font-family: Microsoft YaHei; color: #fff; padding: 10px 30px; }

.content2 h2 { color: #fff; }
.hm-mod-mOA .mOA-pic { height: 520px; width: 760px; position: absolute; right: 0; top: 190px; }
.hm-mod-mOA .mOA-pic .pic1 { position: absolute; z-index: 1; right: 0; top: 20px; opacity: 0; filter: alpha(opacity=0); }
.hm-mod-mOA .mOA-pic .pic2 { position: absolute; z-index: 2; right: 130px; top: 0; opacity: 0; filter: alpha(opacity=0); }
.hm-mod-mOA .mOA-pic .pic-item img { -webkit-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease; /* 	transform:translateX(100px); */ }
.hm-mod-mOA .mOA-pic .pic-item img.pic2 { transition: all 0.4s ease; /* 	transition-delay:0.3s; */ }


.hm-mod-mOA .mOA-pic:hover .pic2 { transform: translateX(140px); }
.hm-mod-mOA .mOA-pic:hover .pic1 { transform: translateX(-60px); }
.hm-mod-mOA .mOA-list { }
.hm-mod-mOA .mOA-list-more,
.hm-sec6 .sec-text .know-eoffice { margin: 30px 0 0 60px; display: block; width: 214px; height: 44px; line-height: 44px; color: #fff; border: 1px solid #fff; border-radius: 3px; text-align: center; font-size: 14px; font-weight: bold; text-decoration: none; opacity: 0; filter: alpha(opacity=0); -webkit-transition: background-color 0.25s ease; -o-transition: background-color 0.25s ease; transition: background-color 0.25s ease; }
.hm-mod-mOA .mOA-list-more:hover,
.hm-sec6 .sec-text .know-eoffice:hover { color: #333; background: #fff; }
.ClientListDIV { width: 800px; }
.ClientListDIV .CellClient { float: left; width: 200px; text-align: center; }
.ClientListDIV .CellClient .DescriptionDIV { font-size: 11px; color: #aaa; }
.ClientListDIV .CellClient .Icon { background-position: center center; background-repeat: no-repeat; height: 90px; background-size: 70px; }
.ClientListDIV .CellClient .Browser { background-image: url(http://www.qiguanbao.com/image/IE.png); }
.ClientListDIV .CellClient .Desktop { background-image: url(http://www.qiguanbao.com/image/windows.png); }
.ClientListDIV .CellClient .IOS { background-image: url(http://www.qiguanbao.com/image/ios.png); }
.ClientListDIV .CellClient .Android { background-image: url(http://www.qiguanbao.com/image/Android.png); }
.ClientListDIV .CellClient .WeXin { background-image: url(http://www.qiguanbao.com/image/WeXin.png); }
.ClientListDIV .TitleDIV { color: #fff; font-size: 14px; margin-bottom: 10px; }

.CustomerList { width:900px; }
.CustomerList .CellCustomer { background-position:center center; background-repeat:no-repeat;  width:150px; height:83px; z-index:100; background-size:150px; float:left; margin:10px 15px; border-radius:5px; }
.CustomerList .清华大学 { background-image:url(http://www.qiguanbao.com/image/Success/logo_qhdx.png); }
.CustomerList .盈科律师事务所 { background-image:url(http://www.qiguanbao.com/image/Success/logo_yk.png); }
.CustomerList .天际数字 { background-image:url(http://www.qiguanbao.com/image/Success/logo-tj.png); }
.CustomerList .王子拉茶 { background-image:url(http://www.qiguanbao.com/image/Success/logo_wzilacha.png); }
.CustomerList .华西医大 { background-image:url(http://www.qiguanbao.com/image/Success/logo_hx.png); }
.CustomerList .天润华邦 { background-image:url(http://www.qiguanbao.com/image/Success/logo_trhb.png); }
.CustomerList .钱多多 { background-image:url(http://www.qiguanbao.com/image/Success/logo_qdd.png); }
.CustomerList .科来 { background-image:url(http://www.qiguanbao.com/image/Success/logo_kl.png); }
.CustomerList .美格生物 { background-image:url(http://www.qiguanbao.com/image/Success/logo_meige.png); }
.CustomerList .国金 { background-image:url(http://www.qiguanbao.com/image/Success/logo_01.png); }
.CustomerList .巴布豆 { background-image:url(http://www.qiguanbao.com/image/Success/logo_bbd.png); }
.CustomerList .血管肿瘤医院 { background-image:url(http://www.qiguanbao.com/image/Success/logo_cs.png); }
.CustomerList .伊恋家居 { background-image:url(http://www.qiguanbao.com/image/Success/logo_yilian.png); }
.CustomerList .圣美迪诺 { background-image:url(http://www.qiguanbao.com/image/Success/logo_san.png); }
.CustomerList .美希 { background-image:url(http://www.qiguanbao.com/image/Success/logo_mxi.png); }
.CustomerList .中环康源 { background-image:url(http://www.qiguanbao.com/image/Success/logo_zhky.png); }
.CustomerList .supper { background-image:url(http://www.qiguanbao.com/image/Success/logo_super.png); }
.CustomerList .科尔集团 { background-image:url(http://www.qiguanbao.com/image/Success/logo_keer.png); }
.CustomerList .多企 { background-image:url(http://www.qiguanbao.com/image/Success/logo_.png); }
.CustomerList .电影派 { background-image:url(http://www.qiguanbao.com/image/Success/logo_dypai.png); }