* { margin: 0; padding: 0; } body { font-family: "微软雅黑"; } a, a:hover, a:focus { text-decoration: none; } ul, li { list-style: none; } .main { width: 1200px; margin: 0 auto; position: relative; } .banner { width: 100%; height: 780px; background: no-repeat center; background-color: #000; } .banner .ban-con { width: 440px; margin: 0 auto; text-align: center; padding-top: 133px; } .banner .ban-con img { display: inline-block; border: none; float: none; } .banner .ban-con img.logo { width: 140px; height: 140px; } .banner .ban-con .logo-txt { margin: 25px 0 50px 0; } .banner .ban-con p { font-size: 20px; color: #fff; letter-spacing: 8px; } .banner .ban-con p span { color: #ffea04; padding: 0 15px; } .banner .ban-con a { display: inline-block; width: 255px; height: 60px; background: no-repeat center; font-size: 24px; color: #000000; letter-spacing: 0; text-align: center; line-height: 60px; } .plan { width: 100%; height: 964px; background-color: #000000; padding-top: 80px; } .plan .plan-top { margin: 0 auto; width: 620px; text-align: center; } .plan .plan-top h3 { font-size: 46px; color: #ffffff; letter-spacing: 0; margin: 0; margin-bottom: 15px; } .plan .plan-top p { font-size: 20px; color: #fff; letter-spacing: 0; line-height: 28px; margin: 0; } .plan .plan-top p span { color: #ffea04; } .plan .plan-botm { margin: 0 auto; margin-top: 90px; width: 1193px; } .plan .plan-botm ul { width: 100%; margin: 0; } .plan .plan-botm ul li { width: 100%; height: 186px; margin-bottom: 10px; padding: 35px 0 0 78px; background: no-repeat center; position: relative; cursor: pointer; } .plan .plan-botm ul li.active { background: no-repeat center; } .plan .plan-botm ul li.active h4, .plan .plan-botm ul li.active h4 strong, .plan .plan-botm ul li.active p { color: #000; } .plan .plan-botm ul li.active span { width: 240px; height: 240px; top: -55px; right: 227px; } .plan .plan-botm ul li.active.li0 span { background: no-repeat center; } .plan .plan-botm ul li.active.li1 span { background: no-repeat center; } .plan .plan-botm ul li.active.li2 span { background: no-repeat center; } .plan .plan-botm ul li.li0 span { background: no-repeat center; } .plan .plan-botm ul li.li1 span { background: no-repeat center; } .plan .plan-botm ul li.li2 span { background: no-repeat center; } .plan .plan-botm ul li h4 { color: #999; font-size: 26px; font-weight: normal; margin: 0; margin-bottom: 22px; } .plan .plan-botm ul li h4 strong { font-size: 32px; font-weight: bold; } .plan .plan-botm ul li p { margin: 0; font-size: 18px; color: #999; } .plan .plan-botm ul li span { position: absolute; display: inline-block; width: 190px; height: 180px; top: 4px; right: 250px; } .jiaolian { width: 100%; height: 995px; background: no-repeat center; background-color: #000; padding-top: 80px; } .jiaolian .jl-top { width: 620px; margin: 0 auto; text-align: center; } .jiaolian .jl-top h3 { font-size: 46px; color: #ffffff; letter-spacing: 0; margin: 0; margin-bottom: 15px; } .jiaolian .jl-top p { margin: 0; font-size: 20px; color: #ffffff; letter-spacing: 0; } .jiaolian .jl-top p span { color: #ffea04; } .jiaolian .jl-botm { width: 945px; height: 698px; margin-top: 96px; position: absolute; top: 0; left: -82px; background: no-repeat center; } .jiaolian .jl-botm .bot-img { width: 582px; height: 580px; background: no-repeat center; position: absolute; top: 45px; right: -257px; } .jiaolian .jl-botm .bot-img .bot-ul { position: absolute; top: 30px; left: 160px; } .jiaolian .jl-botm .bot-img .bot-ul li { display: inline-block; width: 120px; text-align: center; } .jiaolian .jl-botm .bot-img .bot-ul li p { font-size: 20px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0; line-height: 30px; margin: 0; } .jiaolian .jl-botm .bot-img .bot-ul li p span { font-size: 45px; color: #ffea04; line-height: 60px; } .jiaolian .jl-botm .bot-img .bot-kc { position: absolute; top: 177px; left: 130px; } .jiaolian .jl-botm .bot-img .bot-kc h4 { font-size: 28px; color: #ffffff; letter-spacing: 0; line-height: 42px; margin: 0; margin-bottom: 15px; } .jiaolian .jl-botm .bot-img .bot-kc li { font-size: 20px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0; line-height: 24px; float: left; margin-right: 19px; } .jiaolian .jl-botm .bot-img .bot-kc li span { font-size: 26px; color: #ffea04; letter-spacing: 0; line-height: 30px; } .jiaolian .jl-botm .bot-img .bot-kc li i { display: inline-block; width: 27px; height: 25px; background: no-repeat center; } .jiaolian .jl-botm .bot-img .bot-kc li u { display: inline-block; width: 26px; height: 26px; background: no-repeat center; } .jiaolian .jl-botm .bot-img .bot-kc p { font-size: 20px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0; line-height: 24px; margin-left: -31px; margin-top: 26px; } .jiaolian .jl-botm .bot-img .bot-kc .line { display: inline-block; width: 371px; height: 10px; background: #434343; margin-top: 10px; margin-left: -48px; position: relative; } .jiaolian .jl-botm .bot-img .bot-kc .line::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #ffea04; } .jiaolian .jl-botm .bot-img .bot-txt { position: absolute; bottom: 47px; left: 69px; } .jiaolian .jl-botm .bot-img .bot-txt p { font-size: 18px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0; margin: 0; line-height: 30px; } .tiyan { width: 100%; height: 996px; background: no-repeat center; padding-top: 80px; position: relative; } .tiyan .ty-top { width: 500px; margin: 0 auto; text-align: center; } .tiyan .ty-top h3 { font-size: 46px; color: #ffffff; letter-spacing: 0; margin: 0; margin-bottom: 15px; } .tiyan .ty-top span { margin: 0; font-size: 20px; color: #ffea04; letter-spacing: 0; } .tiyan .ty-top p { margin: 0; font-size: 20px; color: #fff; letter-spacing: 0; } .tiyan a { position: absolute; bottom: 100px; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); display: inline-block; width: 255px; height: 60px; background: url(/uploads/image/jimg/1.png) no-repeat center; font-size: 24px; color: #000000; letter-spacing: 0; text-align: center; line-height: 60px; margin-top: 60px; } .foot { width: 100%; height: 200px; background: #151515; } .foot .ft-bd { width: 1100px; margin: 0 auto; padding-top: 34px; position: relative; } .foot .ft-bd h5 { margin: 0; font-size: 18px; color: #ffea04; letter-spacing: 0; margin-bottom: 16px; } .foot .ft-bd h5 span { display: inline-block; width: 25px; height: 28px; background: no-repeat center; vertical-align: text-bottom; margin-right: 10px; } .foot .ft-bd p { margin: 0; font-size: 18px; color: #3f3f3f; letter-spacing: 0; line-height: 25px; } .foot .ft-bd p a { padding: 0 25px; font-size: 18px; color: #666666; letter-spacing: 0; } .foot .ft-bd h4 { margin: 0; font-size: 16px; color: #3f3f3f; letter-spacing: 0; margin-top: 40px; } .foot .ft-bd .ewm { position: absolute; top: 31px; right: -30px; width: 215px; text-align: center; } .foot .ft-bd .ewm p { font-size: 16px; color: #ffea03; letter-spacing: 0; margin: 0; margin-top: 8px; } .foot .ft-bd .ewm img { border: none; } #tbox { width: 132px; float: right; position: fixed; right: 0px; bottom: 50%; z-index: 999; } #xuanfu_help { width: 132px; height: 41px; background: no-repeat; display: block; } #xuanfu_download { width: 132px; height: 44px; background: no-repeat; display: block; } #xuanfu_weixin { width: 132px; height: 44px; background: no-repeat; display: block; } #xuanfu_top { width: 132px; height: 44px; background: no-repeat; display: block; } #xuanfu_help { background-position: 0 0; } #xuanfu_download { background-position: 0 0; } #xuanfu_weixin { background-position: 0 0; } #xuanfu_top { background-position: 0 0px; } .flow_box { float: left; }