html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } /* html5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* body {position: relative;line-height: 1;} */ ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } body { height: auto; position: relative; margin: 0 auto; width: 100%; overflow: hidden; overflow-y: auto; } html { -webkit-text-size-adjust: none; } strong { font-weight: 600; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } /* 鍏叡閮ㄥ垎 */ /* top */ .wrapper { width: 1200px; margin: 0 auto; text-align: left; font-size: 14px; } #top { width: 100%; height: 59px; background: #fff; } #top .xd-logo { width: 138px; float: left; margin-top: 8px; display: block; } #top dl { width: 181px; float: right; margin-top: 10px; } #top dl dt { width: 40px; float: left; } #top dl dd { float: left; color: #484848; margin-left: 6px; font-size: 14px; } #top dl dd span { position: relative; top: -3px; color: #df1a18; font-size: 18px; font-weight: bold; } /* footer */ .footer { width: 100%; border-bottom: 3px #000 solid; padding: 22px 0; background: #333; font-size: 12px; margin-top: 0px; } .footer .content { width: 1200px; margin: 0 auto; text-align: center; color: #f0f0f0; line-height: 28px; } .footer .content p a { padding: 0 6px; color: #fff; } .container { background: #f5d13e; padding-bottom: 80px; } .container .banner { position: relative; width: 100%; padding-top: 53%; background: no-repeat center/cover; } .banner h4 { position: absolute; width: 18.6%; height: 7.4%; font-size: 26px; font-family: source han sans cn; font-weight: bold; color: #040606; left: 50%; top: 49.8%; text-align: center; } @media screen and (max-width: 1400px) { .banner h4 { font-size: 24px; } } .banner .banner-btn1-wrap { position: absolute; top: 62.64%; left: 50%; width: 19.6%; height: 65px; line-height: 65px; text-align: center; } .banner .banner-btn1 { width: 188px; display: inline-block; font-size: 27px; font-family: sourcehansanscn; font-weight: 800; color: #ffffff; background: url(/uploads/image/tqimages/btn-red.png) no-repeat center/cover; cursor: pointer; } .banner .banner-btns { position: absolute; width: 34%; height: 77px; line-height: 77px; bottom: 2%; left: 32.77%; } .banner .banner-btns>div { width: 212px; font-size: 28px; font-family: source han sans cn; font-weight: bold; color: #040606; text-align: center; background: url(/uploads/image/tqimages/btn-yellow.png) no-repeat center/cover; cursor: pointer; } .banner .banner-btns .banner-btn2 { float: left; } .banner .banner-btns .banner-btn3 { float: right; } .modules { width: 1288px; margin: 0 auto; } .modules .module { position: relative; background: #fff; border-radius: 30px; margin-bottom: 47px; } .modules .module:before { position: absolute; background: url(/uploads/image/tqimages/connect-left.png) no-repeat center/cover; content: ' '; bottom: -88px; left: 40px; z-index: 10; width: 44px; height: 129px; } .modules .module:after { position: absolute; background: url(/uploads/image/tqimages/connect-right.png) no-repeat center/cover; content: ' '; bottom: -88px; right: 40px; z-index: 10; width: 44px; height: 129px; } .modules .module:last-child { margin-bottom: 0; } .modules .module:last-child:after, .modules .module:last-child:before { display: none; } .modules .subtitle { text-align: center; padding-bottom: 45px; } .subtitle span { display: inline-block; vertical-align: middle; border-bottom: 2px solid #f39800; font-weight: 800; color: #040606; font-size: 40px; margin-right: 20px; } .subtitle img { display: inline-block; vertical-align: middle; } .module1 { padding: 45px 80px 55px; } .module1 .subtitle img { width: 128px; height: 107px; } .module1 dl { float: left; text-align: center; } .module1 dl dt { width: 390px; height: 60px; background: url(/uploads/image/tqimages/module1-dt-bg.png) no-repeat center/cover; line-height: 60px; font-size: 24px; font-family: sourcehansanscn; font-weight: 800; color: #ffffff; } .module1 dl.module1-right dt { background: url(/uploads/image/tqimages/module1-dt-bg1.png) no-repeat center/cover; } .module1 dl dd { background: #feeed1; width: 390px; height: 49px; line-height: 49px; margin-top: 47px; border-radius: 30px; font-weight: 500; font-size: 21px; font-family: sourcehansanscn; } .module1 .module1-middle { width: 340px; padding-top: 60px; } .module1 .module1-middle dd { width: 183px; margin: 47px auto 0; background: #f8b72c; font-weight: 800; } .module1 .btn-tip { margin-top: 70px; font-size: 21px; font-family: sourcehansanscn; font-weight: 500; color: #000000; text-align: center; } .action-button { width: 189px; height: 68px; background: linear-gradient(180deg, #e94f50, #e72724); box-shadow: 0px 2px 2px 1px rgba(248, 20, 35, 0.58); border-radius: 37px; font-size: 27px; font-weight: 800; color: #ffffff; line-height: 68px; text-align: center; margin: 29px auto 0; cursor: pointer; } .module2 .subtitle img { width: 138px; height: 107px; } .module2 { padding: 35px 40px 55px; } .module2 .module2-left { float: left; } .module2 .module2-right { float: right; } .module2 ul li { position: relative; box-sizing: border-box; width: 581px; /* padding-left: 80px; */ background: #fcfaf0; margin-bottom: 12px; padding: 25px 0 22px 90px; } .module2 ul.module2-right li { padding-left: 75px; /* width: 591px; */ } .module2 ul li h5 { font-size: 21px; font-family: sourcehansanscn; font-weight: 800; color: #000000; line-height: 21px; margin-bottom: 14px; } .module2 ul li p { /* height: 22px; */ line-height: 22px; font-size: 19px; font-family: sourcehansanscn; font-weight: 400; color: #000000; } .module2 ul li:before { position: absolute; top: 12px; left: 12px; text-align: center; content: '01'; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 20px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, #e94f50, #e72724); } .module2 ul li:after { position: absolute; background: url(/uploads/image/tqimages/module2-icon.png) no-repeat center/cover; content: ' '; bottom: 0; right: 0; z-index: 10; width: 35px; height: 40px; } .module2 ul li p:after { position: absolute; border-color: transparent #fff transparent transparent; border-style: solid; border-width: 38px 26px 0 0; content: ' '; bottom: 0; right: 0; z-index: 5; /* width: 25px; */ /* height: 40px; */ } .module2 ul li:nth-child(2):before { content: '02'; } .module2 ul li:nth-child(3):before { content: '03'; } .module2 ul li:nth-child(4):before { content: '04'; } .module2 ul li:nth-child(5):before { content: '05'; } .module2 ul.module2-right li:nth-child(1):before { content: '06'; } .module2 ul.module2-right li:nth-child(2):before { content: '07'; } .module2 ul.module2-right li:nth-child(3):before { content: '08'; } .module2 ul.module2-right li:nth-child(4):before { content: '09'; } .module2 ul.module2-right li:nth-child(5):before { content: '10'; } .module2 .action-button { width: 340px; } .module3 { padding: 40px 80px 55px; } .module3 .subtitle img { width: 133px; height: 127px; } .module3 .module3-left { float: left; width: 657px; height: 483px; background: url(/uploads/image/tqimages/module3-bg.png) no-repeat left/556px 483px; } .module3 .module3-left li { padding-left: 235px; height: 80.5px; line-height: 80.5px; font-size: 21px; font-family: source han sans cn; font-weight: bold; color: #ffffff; } .module3 .module3-left li:last-child span:first-child { display: inline-block; width: 84px; line-height: 23px; text-align: center; } .module3 .module3-left li .m3-right { float: right; color: #000000; } .module3 .module3-left li:first-child .m3-right { display: inline-block; width: 84px; line-height: 23px; padding-top: 17px; } .module3-right { float: right; padding-top: 100px; } .module3-right li { position: relative; padding-left: 40px; font-size: 21px; font-family: sourcehansanscn; font-weight: 500; color: #040606; line-height: 21px; margin-bottom: 30px; } .module3-right li:before { position: absolute; content: ' '; width: 15px; height: 15px; border-radius: 50%; background: #e02418; left: 8px; top: 3px; } .module3 .action-button { width: 342px; } .module4 { padding: 35px 55px 55px; text-align: center; } .module4 .subtitle img { width: 133px; height: 123px; } .module4-typs { /* margin: 0 auto; */ } .module4-typs li { display: inline-block; width: 156px; height: 54px; line-height: 54px; font-size: 21px; background: #f39700; font-family: source han sans cn; font-weight: bold; color: #ffffff; text-align: center; border-radius: 30px; } .module4-typs li:nth-child(2) { margin: 0 75px; } .module4-tips { border-top: 2px solid #666565; border-bottom: 2px solid #666565; font-size: 21px; font-family: sourcehansanscn; font-weight: 500; color: #000000; line-height: 28px; text-align: left; width: 625px; margin: 50px auto; padding: 18px 6px; box-sizing: border-box; } .module4-imgs li { float: left; width: 277px; height: 171px; border-radius: 5px; margin-right: 22px; margin-bottom: 32px; } .module4-imgs li:nth-child(4n) { margin-right: 0; } .module4-imgs li img { display: block; width: 100%; height: 100%; } .module4 .action-button { width: 342px; } .module5 { padding: 50px; text-align: center; } .module5 .subtitle img { width: 134px; height: 98px; } .module5 .module5-list { display: inline-block; } .module5 .module5-list li { display: inline-block; width: 195px; height: 288px; } .module5 .module5-list li:nth-child(2) { width: 210px; height: 270px; margin: 0 105px; } .module5 .module5-list li:nth-child(3) { width: 210px; height: 265px; } .module5 .module5-list li img { width: 100%; height: 100%; display: block; } .module5-citys { margin: 50px auto; width: 574px; font-size: 21px; font-family: sourcehansanscn; font-weight: 500; color: #000000; line-height: 28px; text-align: left; } .module5 .action-button { width: 342px; }