@charset"utf-8"; html { overflow: hidden; font-family: "Microsoft Yahei"; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0 } fieldset, img { border: 0 none } dl, ul, ol, menu, li { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } input, select, textarea, button { vertical-align: middle } button { border: 0none; background-color: transparent; cursor: pointer } body { background: #fff } body, th, td, input, select, textarea, button { font-size: 87.5%; line-height: 1; font-family: "Microsoft Yahei", "ºÚÌå", "ËÎÌå"; color: #333 } a { color: #fff; text-decoration: none } a:active, a:hover { text-decoration: none } address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal } caption { display: none } table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed } img { vertical-align: top } a { outline: 0 } a:active { star: expression(this.onFocus=this.blur()) } .header { width: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; z-index: 100 } /* gsy */ .header.gsy-header { font-size: 16px; } .main { width: 100%; margin: 0 auto; max-width: 1280px; display: flex; } .header .logo { width: 60%; line-height: 60px } .header .logo img { margin: 9px 0 } .nav-wrap { /* width: 40 */ flex: 1; display: flex; } .header li { flex: 1; text-align: center; padding-left:30px;float:left;font-size:18px} .header li a { color: #FFF; display: block; line-height: 68px;padding: 0 10px;} .header li a:hover { background: rgba(237, 88, 19, 0.8) } .footer { background: #333; color: #fff; text-align: center; line-height: 100px } .gobottom { width: 67px; height: 39px; position: absolute; left: 50%; margin-left: -33px; bottom: 60px; background: url(../images/about/bottom.png) no-repeat center; z-index: 11; } .colorbg { background: url(../images/about/bottomcolor.png) no-repeat center; } #pageContain { overflow: hidden } .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0 } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 11; } .current .contain, .slide .contain { display: block } .current { display: block; z-index: 1 } .slide { display: block; z-index: 2 } .swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important } .bg_line { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; } .pagebg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 9; } .page1 { background: url(../images/about/bg01.jpg) 50%; background-repeat: no-repeat; background-size: 100% 100%; min-width: 100%; min-height: 100%; width: auto; height: auto; } .page2 { background: url(../images/about/bg02.jpg) 50%; background-size: cover } .page3 { background: url(../images/about/bg03.jpg) 50%; background-size: cover } .page4 { background: url(../images/about/bg04.jpg) 50%; background-size: cover } .page6 { background: #FFF } .page7 { background: url(../images/about/bg07.jpg) 50% top; } #navBar { z-index: 3; position: absolute; top: 30%; right: 1% } #navBar .active { background: rgba(237, 88, 19, 0.8) } #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%; line-height: 10px; text-align: center; width: 10px; height: 10px; background: #FFF } .txt { margin: 15% auto; font-size: 50px; color: #fff; text-align: center; width: 100%; max-width: 1000px; padding: 20px; background: rgba(0, 0, 0, .3); } .txt2 { margin-left: auto; margin-right: auto; margin-top: 80px; font-size: 50px; color: #fff; width: 100%; max-width: 1200px; } .follow { float: left; padding-top: 15px; } .page1 .text { float: left; margin-left: 50px; text-align: left; width: 50% } .page1 .text-l { margin-bottom: 50px } .page2 .text-l { margin: 20px 0 20px 0 } .page3 .text-l { margin-bottom: 50px } .person { width: 100%; max-width: 640px; margin: 0 auto } .person li { float: left; width: 20%; max-width: 100px; border-radius: 52px; height: 100px; overflow: hidden; margin: 10px 25px; border: 4px solid rgba(0, 0, 0, 0.2); cursor: pointer } .person li img { width: 100% } .person div { width: 100% } .person span { width: 130px; margin: 0 15px; font-size: 18px; float: left } .page4 .text { float: left; text-align: left; width: 50% } .page4 .text-l { margin: 50px 0 } .page5 .mobile { float: left; width: 50% } .page5 .text { text-align: right; width: 50%; float: right } .page5 .text-l { margin-top: 100px } .dialog { position: fixed; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); top: 0 } .dialog .box { width: 100%; margin: 15% auto; max-width: 560px; height: 400px; border-radius: 10px; background: #fff } .avatar { height: 240px; text-align: center; color: #fff; background-size: cover; border-radius: 10px 10px 0 0 } .avatar img { width: 100%; margin: 20px auto; max-width: 100px; border-radius: 50px } .avatar .name { font-size: 24px; line-height: 50px } .desc p { line-height: 2; margin: 50px 40px 50px 50px; float: left } .desc img { margin: 40px 50px 40px 0; float: right } .scroll_part { position: absolute; width: 1340px; height: 384px; left: 50%; margin-left: -670px; top: 50%; margin-top: -190px; } .scroll_part_wrap { height: 100%; width: 100%; position: absolute; left: 0; top: 0; background: url(../images/about/scroll_part_bg.jpg) no-repeat center top; } .scroll_part_next { width: 1030px; height: 430px; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; } .scroll_part_next ul { position: absolute; top: 0; left: 0; } .scroll_part_next ul li { float: left; width: 340px; text-align: center; color: white; } .scroll_part_next ul li dl { padding: 0 38px; } .scroll_part_next ul li dl dd { line-height: 22px; } .scroll_part_next ul li dl dd.tit { line-height: 55px; font-size: 24px; color: #E9441A; padding-top: 40px; } .left_btn, .right_btn { position: absolute; top: 40%; height: 82px; width: 82px; cursor: pointer; } .left_btn { background: url(../images/about/left_btn.png) no-repeat center center; left: 0; } .right_btn { background: url(../images/about/right_btn.png) no-repeat center center; right: 0; } .right_btn:hover { background: url(../images/about/r_active.png) no-repeat center center; } .left_btn:hover { background: url(../images/about/l_active.png) no-repeat center center; } .five_wrap { position: absolute; width: 100%; top: 68px; background: #F60; min-height: 650px; min-width: 1150px; } .five_wrap div.f_l { width: 25%; height: 33.3%; position: relative; *width: 24.99%; } .five_wrap div.f_l img { position: absolute; left: 0; top: 0; height: auto; width: 100%; z-index: 9; display: none; } .fl_wrap { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: #E9441A; overflow: hidden; z-index: 10; } .fl_wrap div { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; color: white; height: 70px; margin-top: -35px; z-index: 101; } .fl_wrap div dl { min-width: 350px; } .fl_wrap div dl dd.tit { font-size: 36px; } .fl_wrap div dl dd { font-size: 18px; padding-top: 5px; } .fl_wrap div dl dd.line { width: 0px; /*height:1px;*/ background: white; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; height: 0px; _font-size: 0; } .fl_wrap div dl dd.btn { width: 100%; position: absolute; left: 0; bottom: -200px /*-45px*/ ; opacity: 0; } .f_l { float: left; } .btn_transition { position: absolute; z-index: 15; width: 100%; left: 0; bottom: -200px; text-align: center; } .five_wrap a.a_one { margin: 0 auto; width: 100%; height: 100%; display: block; } .btn_transition a.a_two { margin: 0 auto; display: block; height: 30px; width: 200px; border: 1px solid white; color: white; font-size: 18px; line-height: 30px; } .btn_transition a:hover { background: white; color: #000; } .five_wrap div.f_l:hover .fl_wrap div dl dd.line { margin-top: 10px; margin-bottom: 10px; width: 200px; height: 1px; _font-size: 0; } .five_wrap div.f_l:hover .btn_transition { bottom: 17%; opacity: 1; } .five_wrap div.f_l:hover .fl_wrap div { top: 40%; } .five_wrap div.f_l:hover .fl_wrap { background: none; } .five_wrap div.f_l:hover img { display: block; } .five_wrap div.f_l div.transition, .fl_wrap div { -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .btn_transition_wrap { position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; overflow: hidden; z-index: 13; } .five_wrap div.f_l .borderClass { position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; z-index: 12; background-color: transparent; } .hezuo { margin-top: 110px; padding-top: 260px; position: relative; color: #585858; background: url(../images/about/bg05.jpg) no-repeat center top; } .hezuo_t { text-align: center; font-size: 24px; opacity: 1; } .hezuo_tips { text-align: center; font-size: 18px; padding-top: 40px; opacity: 1; } .hezuo_list { padding-top: 30px; text-align: center; opacity: 1; } .hezuo_list a { display: inline-block; margin: 0 10px; } .position { text-align: center; height: 72px; position: absolute; color: white; font-size: 26px; left: 50.7%; width: 540px; margin-left: -290px; top: 250px; } .position div { height: 52px; line-height: 52px; background: #E9441A; } .position p { text-align: center; width: 100%; height: 20px; } .position a.web-title { color: #fff; display: block; } .position a.web-title:focus { outline: none; } .contactus { width: 800px; height: 120px; position: absolute; left: 50%; bottom: 0; margin-left: -400px; background: #E9441A; overflow: hidden; color: white; } .contactus_1 { padding: 13px 23px 0 43px; font-size: 18px; } .contactus_1 ul li { line-height: 45px; padding-left: 40px; }