html, body { padding: 0; margin: 0; min-width: 1100px; } * { line-height: 1; box-sizing: border-box; font-family: 'Microsoft Yahei'; font-size: 16px; } a { text-decoration: none; color: white; } a:active { background: none; } img { display: block; max-width: 100%; margin: 0 auto; } .wrap { width: 100%; margin: 0 auto; } .wrap .ofh { overflow: hidden; zoom: 1; } .wrap .fl { float: left; } .wrap .fr { float: right; } .wrap .none { display: none; } .wrap .b { font-weight: bold; } .wrap .bgB { background-color: #333333; } .wrap .cp { cursor: pointer; } .wrap .header { background-color: #6c1c41; background: -webkit-linear-gradient(left, #6c1c41 0, #46122a 100%); width: 100%; min-width: 1100px; height: 90px; position: fixed; top: 0; left: 0; z-index: 5; } .wrap .header p { color: white; margin: 0; padding: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; font-weight: bold; cursor: pointer; display: none; } .wrap .header .link { margin-top: 25px; } .wrap .header .link .showAboutList:hover .aboutList { display: block; } .wrap .header .link > div { float: left; } .wrap .header .link > div > a { font-size: 18px; font-weight: bold; line-height: 65px; margin: 0 15px; cursor: pointer; } .wrap .header .link .aboutList { display: none; position: fixed; top: 85px; left: 764px; z-index: 5; background-color: #fff; width: 140px; padding: 0 15px; border-radius: 5px; border: 1px solid #ddd; } .wrap .header .link .aboutList:before { content: ''; width: 10px; height: 10px; background-color: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: -5px; left: 0; right: 0; margin: auto; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } .wrap .header .link .aboutList a { display: block; color: #333; font-size: 14px; line-height: 36px; border-bottom: 1px solid #ddd; text-align: center; cursor: pointer; } .wrap .header .link .aboutList a:hover { text-decoration: underline; } .wrap .header .link .aboutList a.none { border-bottom: 0; } .wrap .header .logo { width: 250px; height: 90px; background-image: url(../image/logo.png); background-size: 170px auto; background-repeat: no-repeat; background-position: center center; } .wrap .header .phone { height: 90px; display: table; margin-right: 40px; cursor: default; } .wrap .header .phone div { font-style: italic; color: white; } .wrap .header .phone > div { padding-left: 50px; display: table-cell; vertical-align: middle; position: relative; } .wrap .header .phone > div img { position: absolute; top: 0; bottom: 0; left: 13px; margin: auto; width: 26px; } .wrap .header .phone > div:before { content: ''; position: absolute; top: 0; left: 13px; width: 26px; height: 90px; background-image: url(../image/phone.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; } .wrap .header .phone .word { font-size: 14px; } .wrap .header .phone .number { font-size: 20px; } .wrap .middle { min-height: 100vh; padding-top: 90px; opacity: 0; } .wrap .middle.show { -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; opacity: 1; } .wrap .middle .content { max-width: 1000px; margin: 0 auto; padding: 60px 0 70px; } .wrap .middle .content .bFont.b { font-size: 30px; text-align: center; } .wrap .middle .content div { line-height: 2; } .wrap .middle .content .white { color: white; } .wrap .middle .content.phone { background-color: #fff; background-image: url(../image/plan3.png); background-repeat: no-repeat; background-size: auto 100%; background-position: right; max-width: 100%; } .wrap .middle .content .title { text-align: center; } .wrap .middle .content .title div { display: inline-block; height: 100px; line-height: 100px; font-size: 36px; position: relative; padding: 0 80px; font-weight: bold; } .wrap .middle .content .title div:before, .wrap .middle .content .title div:after { content: ''; width: 50px; height: 1px; border-top: 1px solid #dddddd; background-color: #c5c5c5; position: absolute; top: 0; bottom: 0; margin: auto; } .wrap .middle .content .title div:before { left: 0; } .wrap .middle .content .title div:after { right: 0; } .wrap .middle .content .c div { text-align: center; } .wrap .middle .content .b { font-size: 20px; } .wrap .middle .product { max-width: 1500px; width: 100%; margin: 0 auto; } .wrap .middle .product .ofh { padding: 80px 0 0; } .wrap .middle .product .content.bgGray { max-width: 100%; } .wrap .middle .product .productImg { width: 1000px; margin: 35px auto 0; } .wrap .middle .product .productQRcode { margin: 0 auto; width: 440px; } .wrap .middle .product .productQRcode .ofh { padding: 0; } .wrap .middle .product .productQRcode .fl { width: 50%; padding-top: 120px; } .wrap .middle .product .productQRcode .fl img { width: 180px; margin-bottom: 20px; } .wrap .middle .product .productQRcode .fl .type { color: #999999; line-height: 1; } .wrap .middle .product .fl { width: 25%; text-align: center; height: 400px; padding-top: 60px; } .wrap .middle .product .fl img { width: 44%; } .wrap .middle .product .fl .main { height: 80px; line-height: 80px; font-size: 36px; } .wrap .middle .product .fl .detail { line-height: 2; font-size: 18px; padding: 0 20px; } .wrap .middle.bgGray, .wrap .middle .bgGray { background-color: #f6f6f6; } .wrap .middle .img { min-height: 350px; height: 610px; position: relative; } .wrap .middle .img > img { width: 100%; } .wrap .middle .img > img.pa { position: absolute; top: 0; left: 0; z-index: 1; } .wrap .middle .img .subImg { display: table; width: 1000px; margin: 0 auto; position: relative; z-index: 2; } .wrap .middle .img .subImg > div { display: table-cell; vertical-align: middle; } .wrap .middle .img .subImg > div div { color: white; font-size: 16px; line-height: 1.5; padding-top: 20px; } .wrap .middle .img .subImg > div div.bF { font-size: 20px; font-weight: bold; text-align: center; } .wrap .middle .img .subImg > div img { max-width: 528px; width: 40%; } .wrap .footer { opacity: 0; } .wrap .footer.show { -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; opacity: 1; } .wrap .footer div, .wrap .footer a { color: white; } .wrap .footer .cd { cursor: default; } .wrap .footer .content { width: 1000px; margin: 0 auto; padding: 55px 0; } .wrap .footer .fl { width: 25%; } .wrap .footer .fl > div { text-align: left; height: 40px; line-height: 40px; position: relative; } .wrap .footer .fl > div.title { height: 60px; line-height: 60px; } .wrap .footer .fl > div:hover .qrcode { display: block; } .wrap .footer .fl > div .qrcode { position: absolute; left: 120px; top: 0; bottom: 0; margin: auto; overflow: hidden; z-index: 2; display: none; width: 240px; height: 140px; } .wrap .footer .fl > div .qrcode > div { float: left; width: 120px; padding: 5px; background-color: #fff; } .wrap .footer .fl > div .qrcode img { width: 100px; } .wrap .footer .fl > div .qrcode div { text-align: center; color: #333; font-size: 14px; } .wrap .footer .title, .wrap .footer .phone { font-size: 24px; } .wrap .footer .bottom { height: 60px; line-height: 60px; background-color: #292929; color: rgba(255, 255, 255, 0.2); text-align: center; } #service .service { padding: 60px 0 100px; } #service .service .serviceTitle { font-size: 48px; font-weight: bold; text-align: center; margin-bottom: 80px; } #service .service .serviceImg { width: 500px; margin: 60px auto 20px; } #service .service .ofh { max-width: 1600px; width: 100%; margin: 0 auto; } #service .service .ofh .fl { width: 32%; margin-left: 1%; background-color: #fff; margin-bottom: 10px; } #service .service .ofh .fl .detail { line-height: 2; color: #666666; font-size: 18px; padding: 10px 20px; } #about .aboutUs { padding: 40px 0 20px; } #about .aboutUs > div { background-color: #fff; width: 1000px; margin: 0 auto; padding: 30px 35px; } #about .aboutUs > div .title { line-height: 1; text-align: left; font-size: 24px; font-weight: bold; margin: 20px 0; } #about .aboutUs > div div { line-height: 1.5; } #news > .ofh { width: 1000px; min-height: 360px; margin: 0 auto; padding: 40px 0; } #news > .ofh .newsList { width: 450px; height: 240px; background-color: #fff; padding: 30px 20px 0; margin-bottom: 40px; } #news > .ofh a { height: 44px; line-height: 44px; color: #333; } #news > .ofh a.fr { font-size: 14px; color: #731e45; cursor: pointer; } #news > .ofh a.fr:hover { text-decoration: underline; } #news > .ofh .listTitle div { height: 44px; line-height: 44px; } #news > .ofh .listTitle div.b { font-size: 18px; display: inline-block; } #news > .ofh .lis a { display: block; height: 36px; line-height: 36px; border-bottom: 1px dashed #dddddd; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #news > .ofh .lis a:hover { text-decoration: underline; } #list { padding-bottom: 40px; } #list .listBor { width: 1000px; height: 550px; margin: 40px auto 0; background-color: #fff; padding: 20px 20px 0; position: relative; } #list .listBor .listTitle { height: 44px; line-height: 44px; font-size: 18px; } #list .listBor .ofh { display: block; height: 36px; border-bottom: 1px dashed #dddddd; cursor: pointer; color: #333; } #list .listBor .ofh:hover .fl { text-decoration: underline; } #list .listBor .ofh .fr { color: #999999; } #list .listBor .ofh div { line-height: 36px; font-size: 14px; } #list .page { position: absolute; bottom: 55px; left: 20px; overflow: hidden; display: none; } #list .page * { font-size: 14px; } #list .page > div, #list .page .num div { float: left; height: 37px; line-height: 37px; margin: 0 .2em; } #list .page div { padding: 0 .9em; border: 1px solid #ddd; text-align: center; color: #741e46; } #list .page div.pageSure { background-color: #741e46; color: white; border-color: #741e46; } #list .page .pre, #list .page .first, #list .page .num div, #list .page .last, #list .page .next, #list .page .pageSure { cursor: pointer; } #list .page .pre:hover, #list .page .first:hover, #list .page .num div:hover, #list .page .last:hover, #list .page .next:hover, #list .page .pageSure:hover { background-color: #741e46; color: white; border-color: #741e46; } #list .page .active { background-color: #741e46; color: white; border-color: #741e46; } #list .page input { width: 75px; height: 37px; border: 1px solid #ddd; outline: none; padding: 0 1em; margin: 0 .5em; text-align: center; } #list .page .borNone { border: none !important; margin: 0 !important; padding: 0 !important; } #list .page .to { margin-left: 25px; margin-right: 10px; border: 0; } #newsDetail { padding-bottom: 40px; } #newsDetail .content { width: 1000px; margin: 40px auto 0; background-color: #fff; padding: 60px; } #newsDetail .content .accessory, #newsDetail .content a { color: #731e45; font-size: 18px; cursor: pointer; } #newsDetail .content a:hover { text-decoration: underline; } #newsDetail .content .title { font-size: 24px; font-weight: bold; } #newsDetail .content .subTitle { font-size: 14px; color: #999; text-align: center; } #newsDetail .content .detail { margin-top: 30px; } #newsDetail .content .detail img { display: inline-block; } #partner .partner { overflow: hidden; } #partner .partner img { float: left; width: 23%; margin: 20px 1% 0; } #development .development { padding: 70px 0 100px; } #development .development img { width: 100%; } #index .index { width: 808px; margin: 40px auto 50px; } #index .swiper { position: relative; } #index .swiper .imgBor { width: 100%; overflow: hidden; height: 610px; position: relative; } #index .swiper .imgBor .imgs { width: 100%; height: 100%; overflow: hidden; position: relative; } #index .swiper .imgBor .imgs img { display: none; position: absolute; top: 0; left: 0; } #index .swiper .leftBtn, #index .swiper .rightBtn { position: absolute; top: 0; bottom: 0; width: 3%; height: 80px; margin: auto; } #index .swiper .leftBtn img, #index .swiper .rightBtn img { cursor: pointer; } #index .swiper .leftBtn { left: 50px; } #index .swiper .rightBtn { right: 50px; } #index .swiper .points { position: absolute; left: 0; bottom: 40px; text-align: center; width: 100%; height: 5px; } #index .swiper .points .point { width: 30px; height: 5px; display: inline-block; margin: 0 5px; background-color: #ddd; cursor: pointer; } #index .swiper .points .point.active { background-color: #fff; } #plan .video { width: 900px; margin: 0 auto; } #plan .videoBg { background-image: url(../image/bg.jpg); background-repeat: no-repeat; background-size: auto; background-position: center 400px; max-width: 100%; } #plan .planImg { width: 1000px; margin: 40px auto 0; } #plan .planImg .map { width: 940px; } #plan .fonts { text-align: center; font-size: 22px; } #plan .model { background-color: #682634; max-width: 100%; } #plan .model img { margin-top: 30px; width: 1000px; } #plan .demo { background: url(../image/demoBg.jpg) 0 0 no-repeat; background-size: 100% 100%; max-width: 100%; } #plan .demo img { margin-top: 30px; width: 900px; } #product .content { padding-bottom: 0; }