/* 模块(没有前缀,多个单词用 - 连接) 元素(元素在模块之后,可以有多个层级,以 __ 连接) 修饰(某元素、或者某模块特别的状态,必须有一个状态名和状态值,使用 _ 链接) */ body{ background-color: #fff; margin: 0; padding: 0; font-size: 16px; font-family: "microsoft yahei",微软雅黑 } a{ text-decoration: none; } li{list-style:none;} h2,h3{ margin: 0; padding: 0; font-weight: normal; } .header{ background-color: #f7f7f7; } .header__wrap{ height: 80px; margin: 0 auto; position: relative; } .header__logo{ width: 150px; height: 38px; line-height: 38px; font-size: 20px; color: #07111b; text-indent: 50px; background-size: 38px 38px; position: absolute; top: 50%; margin-top: -19px; left: 20px; } .header__nav{ position: absolute; right: 20px; height: 38px; top: 50%; margin-top: -19px; } .header__nav-item{ color: #292f35; font-size: 14px; display: block; height: 38px; line-height: 38px; float: left; position: relative; width: 30px; text-align: center; /* margin: 0;*/ padding-left: 40px; } .header__nav-item:hover{ color: #f01400; } .header__nav-item_status_active{ color: #f01400; } .header__nav-item_status_active::after{ /* content: ' '; display: block; width: 100%; height: 2px; position: absolute; background-color:#f01400; left: 0; bottom: 0;*/ } .header__nav-item_custom_button{ background: #000; color: #f4f4f5; text-align: center; width: 90px; border-radius: 3px; /**/ margin-left:40px; padding: 0; } /*第一屏*/ .screen-1{ height: 870px; background-color: #e7e7e7; position: relative; overflow: hidden; background:url(/uploads/image/zcimages/bg-screen-1.png) no-repeat center; background-size: cover; } .screen-1__heading{ font-weight: normal; margin: 0; padding: 0; font-size:46px; color: #4d555d; text-align: center; padding-top: 152px; } .screen-1__heading b{ color: #f01400; font-weight: normal; } .screen-1__phone{ width: 1375px; height: 805px; background:url(/uploads/image/zcimages/screen-1-phone.png) no-repeat center; position: absolute; left: 50%; margin-left: -687px; bottom: 10px; z-index: 2; } .screen-1__shadow{ width: 1233; height: 411px; background:url(/uploads/image/zcimages/screen-1-shadow.png) no-repeat center; position: absolute; left: 50%; margin-left: -616px; bottom: 30px; z-index: 1; opacity: .8; } /*第二屏*/ .screen-2{ background-color: #fafafa; height: 800px; position: relative; overflow: hidden; } .screen-2__heading{ font-weight: normal; margin: 0; padding: 0; font-size:36px; line-height: 46px; color: #f01400; text-align: center; padding-top: 96px; } .screen-2__subheading{ font-weight: normal; margin: 0; padding: 0; font-size:14px; color: #2c3137; text-align: center; padding-top: 25px; line-height: 28px; width:80%; margin-left:10%; } .screen-2__phone{ width: 928px; height: 873px; background:url(/uploads/image/zcimages/screen-2-phone.png) no-repeat center; position: absolute; left: 50%; margin-left: -464px; bottom: -345px; z-index: 2; } .screen-2__point{ width: 220px; padding-right: 20px; height: 22px; font-size: 22px; line-height: 22px; color: #4d555d; position: absolute; background: url(/uploads/image/zcimages/icon-point-right.png) no-repeat center right; } .screen-2__point_custom_right{ padding: 0 0 0 112px; background: url(/uploads/image/zcimages/icon-point-left.png) no-repeat center left; } .screen-2__point_i_1{ top: 150px; left: 60px; } .screen-2__point_i_2{ top: 400px; right: -50px; } .screen-2__point_i_3{ top: 420px; right: 10px; } /*第三屏*/ .screen-3{ background-color: red; height: 800px; position: relative; overflow: hidden; background:url(/uploads/image/zcimages/bg-screen-3.png) no-repeat center; background-size: cover; } .screen-3__wrap{ width: 1200px; height: auto; margin: 0 auto; position: relative; } .screen-3__heading{ font-size:46px; line-height: 46px; color: #ffffff; text-align: left; padding-top: 94px; } .screen-3__subheading{ font-size:14px; color: #ffffff; text-align: left; padding-top: 25px; line-height: 28px; } .screen-3__phone{ width: 750px; height: 873px; background:url(/uploads/image/zcimages/screen-3-phone.png) no-repeat center top; position: absolute; right: 0; top: 195px; z-index: 2; } .screen-3__features{ position: absolute; top: 395px; left: 0; width: 320px; height: 280px; } .screen-3__features__item{ width: 138px; height:118px; border: 1px solid #cb7173; margin: 0 20px 20px 0; float: left; border-radius: 3px; color: #fff; text-align: center; } .screen-3__features__item__number{ height: 36px; font-size: 30px; line-height: 36px; padding: 28px 0 8px; } .screen-3__features__item__desc{ height: 14px; font-size: 14px; line-height: 20px; } /*第二屏*/ .screen-8{ background-color: #e4e4e4; height: 800px; position: relative; overflow: hidden; } .screen-8__heading{ font-weight: normal; margin: 0; padding: 0; font-size:36px; line-height: 46px; color: #f01400; text-align: center; padding-top: 96px; } .screen-8__subheading{ font-weight: normal; margin: 0; padding: 0; font-size:14px; color: #2c3137; text-align: center; padding-top: 25px; line-height: 28px; width:80%; margin-left:10%; } .screen-8__phone{ width: 928px; height: 873px; background:url(/uploads/image/zcimages/screen-2-phone.png) no-repeat center; position: absolute; left: 50%; margin-left: -464px; bottom: -345px; z-index: 2; } .screen-8__point{ width: 220px; padding-right: 20px; height: 22px; font-size: 22px; line-height: 22px; color: #4d555d; position: absolute; background: url(/uploads/image/zcimages/icon-point-right.png) no-repeat center right; } .screen-8__point_custom_right{ padding: 0 0 0 112px; background: url(/uploads/image/zcimages/icon-point-left.png) no-repeat center left; } .screen-8__point_i_1{ top: 150px; left: -104px; } .screen-8__point_i_2{ top: 360px; right: -120px; } .screen-8__point_i_3{ top: 420px; right: 10px; } /*第四屏*/ .screen-4{ background-color: #ffffff; height: 800px; position: relative; overflow: hidden; } .screen-4__wrap{ width: 1300px; height: auto; margin: 0 auto; position: relative; } .screen-4__heading{ font-size:46px; line-height: 46px; color: #f01400; text-align: center; padding-top: 135px; } .screen-4__subheading{ font-size:14px; color: #464a4f; text-align: center; padding-top: 29px; line-height: 28px; width:80%; margin-left:10%; } .screen-4__type{ width: 1300px; height: 270px; position: absolute; top: 304px; } .screen-4__type a{ color:#000000;} .screen-4__type a:hover{ color:#f01400;} .screen-4__type__item{ width: 250px; margin-right: 10px; height: 270px; float: left; position: relative; text-align: center; background-size: cover; } .screen-4__type__item__color{ width: 100%; height: 14px; line-height: 14px; font: 18px; color: #2c3238; position: absolute; bottom: -44px; } .screen-4__type__item_i_1{ background: no-repeat left top; } .screen-4__type__item_i_2{ background: no-repeat left top; } .screen-4__type__item_i_3{ background: no-repeat left top; } .screen-4__type__item_i_4{ background: no-repeat left top; } .screen-4__type__item_i_5{ background: no-repeat left top; } .screen-4__type__item__storage{ width: 100%; height: 12px; line-height: 12px; font: 12px; color: #a4a9ae; position: absolute; bottom: -66px; } /*第五屏*/ .screen-5{ position: relative; overflow: hidden; background-color: #d9dde1; } .screen-5__bg{ width: 1920px; height: 433px; background:url(/uploads/image/zcimages/bg-screen-5.png) no-repeat center; background-size: contain; position: absolute; left: 50%; margin-left: -960px; bottom: -80px; } .screen-5__heading{ font-size:40px; line-height: 46px; color: #f01400; text-align: center; padding-top: 130px; } .screen-5__subheading{ font-size:14px; color: #2c3137; text-align: center; padding-top: 25px; line-height: 28px; } .screen-6{ height: 870px; background-color: #e7e7e7; position: relative; overflow: hidden; background:url(/uploads/image/zcimages/bg-screen-2.jpg) no-repeat center; background-size: cover; margin-bottom:5px; } .screen-7{ background-color: #e7e7e7; position: relative; overflow: hidden; background:url(/uploads/image/zcimages/beijing.jpg) no-repeat center; background-size: cover; margin-bottom:5px; } /*立即购买*/ .screen-buy{ height: 80px; padding: 120px 0; position: relative; overflow: hidden; background: #2b333b center no-repeat; text-align: center; } .screen-buy__button{ height: 80px; width: 240px; text-align: center; line-height: 80px; font-size: 24px; color: #fff; background-color: #f01414; display: inline-block; border-radius: 3px; transition: all .5s; } .screen-buy__button:hover{ box-shadow: 0px 0px 10px rgba(0,0,0,.5); } .footer{ height: 80px; line-height: 80px; text-align: center; color: #fff; font-size: 12px; background-color: #07111b; } /*大纲样式*/ .outline { position: fixed; padding: 5px 10px; bottom: 120px; lift: 0; z-index: 1; background-color: #fff; box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1); z-index: 3; } .outline__item { display: block; width: 40px; height: 30px; line-height: 30px; padding: 5px 0; background: rgb(255,255,255); margin: 5px 0px 0px; border-top: 1px solid #eee; text-align: center; color: #93999f; } .outline__item:first-child{ border:none; } .outline__item:hover, .outline__item_status_active{ color: #f00; } .header__nav-item{ /*width: 30px; text-align: center; margin: 0; padding-left: 40px;*/ } .header__nav-tip{ position: absolute; width: 30px; margin-left: 40px; height: 2px; background: #f00; left: 0; bottom: 0px; transition: all .5s; } .screen-1 h2{ color: #ffffff;} /* 我要咨询 */ .wantconsult .zxtitle { height: 68px; border-top: 2px solid #333333; } .wantconsult .zxtitle .p1 { font-size: 22px; line-height: 68px; color: #333; } .wantconsult .zxtitle .p2 .i14 { margin-top: 25px; } .wantconsult .zxtitle .p2 .i15 { margin-top: 31px; } .wantconsult .zxtitle .p2 span { margin: 30px 6px 0; font-size: 19px; font-style: italic; color: #333333; } .wantconsult_btm { width:1200px; height: 450px; overflow: hidden; margin-bottom: 30px; margin:0 auto;} .wantconsult_btm_left { width: 246px; padding-left: 35px; height: 450px; } .wantconsult_btm_left .sixpage { font-size: 24px; font-weight: bold; color: #fff; margin: 44px 0 25px; } .wantconsult_btm_left ul li { height: 42px; line-height: 42px; font-size: 17px; color: #fff; } .wantconsult_btm_left ul li i { background: no-repeat; margin: 10px 7px 0 0; } .wantconsult_btm_left ul li .i16 { width: 20px; height: 22px; background-position: -1px -1px; } .wantconsult_btm_left ul li .i17 { width: 21px; height: 22px; background-position: 0px -43px; } .wantconsult_btm_left ul li .i18 { width: 21px; height: 22px; background-position: 0px -85px; } .wantconsult_btm_left ul li .i19 { width: 21px; height: 22px; background-position: 0px -127px; } .wantconsult_btm_left ul li .i20 { width: 21px; height: 22px; background-position: 0px -169px; } .wantconsult_btm_left ul li .i21 { width: 21px; height: 22px; background-position: 0px -211px; } .wantconsult_btm_left ul li font { font-size: 12px; } .wantconsult_btm_left .chanquan { font-size: 12px; color: #fff; margin-top: 35px; line-height: 18px; } .wantconsult_btm_right { width: 919px; height: 450px; } .wantconsult_btm_right .form { width: 510px; margin-left: 40px; padding-top:50px; } .wantconsult_btm_right .form textarea { padding: 15px 20px; width: 470px; height: 120px; line-height: 20px; font-size: 14px; color: #aeaeae; border-radius: 5px; margin-top: 40px; background: #f3f2f1; outline: none; } .wantconsult_btm_right .form .input_p { height: 40px; background: #f3f2f1; width: 490px; padding-left: 20px; border-radius: 5px; margin-top: 20px; } .wantconsult_btm_right .form .input_p .span1 { display: inline-block; width: 54px; height: 16px; line-height: 16px; border-right: 1px solid #d8d8d8; font-size: 16px; color: #404040; margin-top: 12px; text-align: text-justify; } .wantconsult_btm_right .input_p .txt { width: 270px; padding-left: 10px; border: none; background: #f3f2f1; height: 38px; line-height: 38px; outline: none; font-size: 14px; color: #aeaeae; } .wantconsult_btm_right .form textarea:focus { color: #666; } .wantconsult_btm_right .input_p .txt:focus { color: #666; } .input_p font { font-size: 14px; color: #666; margin-top: 12px; margin-right: 18px; margin-bottom:18px } .radio_box { display: inline-block; position: relative; margin-left: 10px; } .radio_box label { width: 16px; height: 16px; position: absolute; top: -1px; left: 0px; border: 1px solid #878787; border-radius: 50%; background: #fff; cursor: pointer; } .radio_box input { margin-right: 4px; margin-top: 1px; } .radio_box input:checked label { border: 1px solid #ec2020; } .radio_box input:checked label:after { content: ''; width: 10px; height: 10px; position: absolute; top: 3px; left: 3px; background: #ec2020; border-radius: 50%; } .check_box em { margin: 0 0 0 5px; } .input_p .span2 { display: block; width: 135px; height: 40px; border: none; border-left: 1px solid #d3d3d3; background: #ebebeb; color: #f22f2f; font-size: 15px; text-align: center; line-height: 40px; cursor: pointer; outline: none; } .sub_zixun { margin-top: 30px; height: 50px; text-align: center; } .sub_zixun input { width: 200px; height: 50px; font-size: 18px; color: #fff; background: #f43d3d; border-radius: 5px; border: none; outline: none; } .select_yixiang { width: 310px; height: 350px; background: rgba(255,255,255,.8); margin: 40px 40px 0 0; border-radius: 5px; position: relative; } .nintitle { height: 45px; line-height: 45px; font-size: 15px; font-weight: bold; color: #666; padding-left: 18px; background: #f7f7f7; margin-bottom: 15px; border-radius: 5px 5px 0 0; } .nintitle em { color: #f02c2c; } .select_yixiang li { height: 32px; line-height: 32px; font-size: 13px; color: #666666; background: no-repeat left center; margin-left: 18px; padding-left: 12px; cursor: pointer; overflow: hidden; } .select_yixiang li:hover { text-decoration: underline; } .select_yixiang .jiao { position: absolute; left: -8px; top: 19px; width: 8px; height: 12px; background: no-repeat; } .select_yixiang li a { color: #666666; } /* 浮动 */ .clear { zoom: 1; clear: both; } .clear:after { content: ""; clear: both; height: 0; line-height: 0; display: block; visibility: hidden; } .fl1 { float: left; display: inline; } .fr1 { float: right; display: inline; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }