body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; } body{ font-family: 'Microsoft YaHei','微软雅黑'; line-height: normal;} li{ list-style: none; } img{ border: 0; } a{ text-decoration: none; } .fl{ float: left; } .fr{ float: right; } .clear,.clr{ clear: both; } .content{ width: 1200px; margin: 0 auto;} /*****banner部分样式*****/ #banner{ width: 100%; height: 550px; max-width: 1920px; margin: 0 auto; } #banner div{ width: 100%; height: 55px; } #banner .content01{ background: url(../img/banner_01.png) center no-repeat; } #banner .content02{ background: url(../img/banner_02.png) center no-repeat; } #banner .content03{ background: url(../img/banner_03.png) center no-repeat; } #banner .content04{ background: url(../img/banner_04.png) center no-repeat; } #banner .content05{ background: url(../img/banner_05.png) center no-repeat; } #banner .content06{ background: url(../img/banner_06.png) center no-repeat; } #banner .content07{ background: url(../img/banner_07.png) center no-repeat; } #banner .content08{ background: url(../img/banner_08.png) center no-repeat; } #banner .content09{ background: url(../img/banner_09.png) center no-repeat; } #banner .content10{ background: url(../img/banner_10.png) center no-repeat; } /*****隐形矫正与传统矫正对比*****/ #lm01{ width: 100%; height: 390px; background: #fff; padding-top: 40px; } #lm01 .content{ position: relative; width: 1200px; height: 350px; margin: 0 auto; background: url(../img/lm01_c.jpg) no-repeat; } #lm01 .l_c,#lm01 .c_c,#lm01 .r_c{ position: absolute; top: 0; height: 100%; } #lm01 .l_c{ left: 0; width: 450px; } #lm01 .c_c{ left: 450px; width: 300px; } #lm01 .r_c{ left: 750px; width: 450px; } #lm01 dt{ position: absolute; left: 190px; top: 140px; line-height: 100%; font-size: 34px; color: #ff7963; } #lm01 dd{ width: 220px; text-align: center; line-height: 120%; font-size: 30px; color: #fff; } #lm01 .p01{ position: absolute; left: 0px; top: 50px; } #lm01 .p02{ position: absolute; left: 230px; top: 50px; } #lm01 .p03{ position: absolute; left: 0px; top: 235px; } #lm01 .p04{ position: absolute; left: 230px; top: 235px; } #lm01 .t{ position: absolute; left: 0; top: 108px; width: 100%; text-align: center; font-weight: bold; font-size: 27.5px; color: #fff; } #lm01 .c{ position: absolute; left: 0; top: 145px; width: 100%; text-align: center; font-size: 60px; color: #fff; } #lm01 a{ display: block; position: absolute; left: 80px; top: 294px; width: 140px; height: 36px; text-align: center; line-height: 36px; background: #f8b62a; font-size: 22px; color: #f5f5f5; border-radius: 36px; } /*****牙齿畸形问题*****/ #lm02{ width: 100%; height: 495px; background: #f5f5f5; } #lm02 .content{ width: 1200px; margin: 0 auto; } #lm02 .t{ float: left; width: 100%; height: 70px; margin-top: 45px; text-align: center; background: url(../img/lm02_t.png) bottom center no-repeat; font-weight: bold; font-size: 36px; color: #ff7963; } #lm02 .c{ float: left; width: 1197px; margin-top: 33px; margin-left: 1.5px; background: url(../img/lm02_c.png) no-repeat; } #lm02 .c li{ float: left; width: 175px; height: ; text-align: center; line-height: 60px; padding-top: 168px; font-size: 24px; color: #333; } #lm02 .c li.ml{ margin-left: 29px; } #lm02 a{ display: block; width: 300px; height: 46px; margin: 26px auto; text-align: center; line-height: 46px; background: #f8b62a; font-size: 24px; font-weight:bold; color: #f5f5f5; border-radius: 36px; } /*****优典3大权威矫正，私人定制*****/ #lm03{ width: 100%; height: 1133px; background: #fff; } #lm03 .content{ width: 1200px; height: 100%; margin: 0 auto; } #lm03 .t{ float: left; width: 100%; height: 70px; margin-top: 45px; text-align: center; background: url(../img/lm03_t.png) bottom center no-repeat; font-weight: bold; font-size: 36px; color: #ff7963; } #lm03 .c01,#lm03 .c02,#lm03 .c03{ float: left; width: 710px; height: 303px; margin-top: 20px; border-top: 2px solid #ddd; } #lm03 .c01{ padding-right: 490px; background: url(../img/lm03_c01.png) right no-repeat; } #lm03 .c02{ padding-left: 490px; background: url(../img/lm03_c02.png) left no-repeat; } #lm03 .c03{ padding-right: 490px; background: url(../img/lm03_c03.png) right no-repeat; } #lm03 .c_t{ margin-top: 10px; padding-left: 40px; line-height: 50px; font-size: 30px; color: #ff7963; } #lm03 .num01{ background: url(../img/lm03_t01.png) left center no-repeat; } #lm03 .num02{ background: url(../img/lm03_t02.png) left center no-repeat; } #lm03 .num03{ background: url(../img/lm03_t03.png) left center no-repeat; } #lm03 .cc{ line-height: 25px; font-size: 15px; color: #5b5b5b; } #lm03 .cc a{ color: #29a7e1; } #lm03 .pic{ width: 710px; height: 130px; margin: 6px 0; } #lm03 .c01 .pic{ background: url(../img/lm03_pic01.png) no-repeat; } #lm03 .c02 .pic{ background: url(../img/lm03_pic02.png) no-repeat; } #lm03 .c03 .pic{ background: url(../img/lm03_pic03.png) no-repeat; } #lm03 .shrq{ font-size: 20px; color: #666; } #lm03 .shrq span{ color: #ff7963; } /*****优典口腔牙齿矫正流程****/ #lm04{ width: 100%; height: 777px; background: #f5f5f5; } #lm04 .content{ width: 1200px; height: 100%; margin: 0 auto; } #lm04 .t{ float: left; width: 100%; height: 70px; margin-top: 45px; text-align: center; background: url(../img/lm04_t.png) bottom center no-repeat; font-weight: bold; font-size: 36px; color: #ff7963; } #lm04 .c{ float: left; margin-top: 40px; width: 100%; height: 618px; } #lm04 .c li{ float: left; width: 262px; padding-top: 270px; } #lm04 .c01{ background: url(../img/lm04_pic01.png) no-repeat; } #lm04 .c02{ background: url(../img/lm04_pic02.png) no-repeat; } #lm04 .c03{ background: url(../img/lm04_pic03.png) no-repeat; } #lm04 .c04{ background: url(../img/lm04_pic04.png) no-repeat; } #lm04 .c02,#lm04 .c03,#lm04 .c04{ margin-left: 50px; } #lm04 .tt{ width: 100%; text-align: center; line-height: 40px; font-size: 26px; color: #ff7963; } #lm04 .cc{ width: 100%; height: 220px; text-align: justify; line-height: 28px; font-size: 15px; color: #666; } #lm04 a{ display: block; width: 140px; height: 36px; margin: 0 auto; text-align: center; line-height: 36px; background: #f8b62a; font-size: 22px; color: #fff; border-radius: 36px; } /*****优典牙齿矫正专家*****/ #lm05{ width: 100%; height: 734px; margin-top: 50px; background: url(../img/lm05.png) center no-repeat; } #lm05 .content{ width: 1200px; height: 100%; margin: 0 auto; } #lm05 .t{ float: left; width: 100%; height: 70px; margin-top: 45px; text-align: center; background: url(../img/lm05_t.png) bottom center no-repeat; font-weight: bold; font-size: 36px; color: #ff7963; } #lm05 .tabs{ width: 740px; height: 45px; margin: 22px auto; } #lm05 .tabs p{ float: left; width: 360px; height: 45px; text-align: center; line-height: 45px; background: #999; font-size: 24px; color: #fff; } #lm05 .tabs p.ml{ margin-left: 20px; } #lm05 .tabs p.active{ background: #ff7963; } #lm05 .swiper-container{ height: 530px; overflow: hidden; } #lm05 .swiper-slide{ width: 100%; height: 530px; } #lm05 .content-slide{ width: 660px; height: 530px; padding-right: 540px; text-align: justify; } #lm05 .zj01{ background: url(../img/zj01.png) right bottom no-repeat; } #lm05 .zj02{ background: url(../img/zj02.png) right bottom no-repeat; } #lm05 .name{ width: 100%; margin-top: 15px; font-size: 30px; color: #555; } #lm05 .name span{ font-weight: bold; font-size: 40px; color: #ff7963; } #lm05 .zw{ margin: 10px 0; line-height: 36px; padding: 10px; background: #fd9f8c; font-size: 20px; color: #fff; } #lm05 .sc{ line-height: 28px; font-size: 16px; color: #555; } #lm05 .jj{ line-height: 28px; font-size: 16px; color: #555; } #lm05 .btn01,#lm05 .btn02{ float: left; display: block; width: 125px; height: 39px; text-align: center; line-height: 39px; margin-top: 20px; font-size: 18px; color: #fff; border-radius: 8px; } #lm05 .btn01{ background: #f8b62a; } #lm05 .btn02{ margin-left: 20px; background: #ff7963; } /*****优典口腔牙齿矫正案例*****/ /* #lm06 .case01,#lm06 .case02{ float: left; position: relative; top: 25px; width: 590px; height: 500px; } #lm06 .case01{ background: #f5f5f5 url(../img/case01.png) bottom no-repeat; } #lm06 .case02{ margin-left: 20px; background: #f5f5f5 url(../img/case02.png) bottom no-repeat; } #lm06 .info{ position: absolute; left: 255px; top: 40px; width: 320px; height: 180px; line-height: 25px; font-size: 15px; color: #333; } #lm06 a{ display: block; position: absolute; left: 390px; top: 445px; width: 180px; height: 36px; text-align: center; line-height: 36px; background: #f8b62a; border-radius: 36px; font-size: 22px; color: #fff; } */ #lm06{ position: relative; width: 100%; height: 800px; background: #fff; } #lm06 .content{ width: 1200px; height: 100%; margin: 0 auto; } #lm06 .t{ float: left; width: 100%; height: 70px; margin-top: 45px; text-align: center; background: url(../img/lm06_t.png) bottom center no-repeat; font-weight: bold; font-size: 36px; color: #ff7963; } #lm06 .c{ position: absolute; left: 50%; top: 120px; width: 1200px; height: 660px; margin-left: -600px; } #lm06 .c li{ display: none; width: 100%; height: 100%; } #lm06 .c li a{ display: block; width: 100%; height: 100%; } #lm06 .c li.show{ display: block; } #lm06 .c h4{ position: absolute; top: 30px; font-size: 30px; color: #666; } #lm06 .c .wz01{ position: absolute; top: 80px; font-size: 20px; color: #999; } #lm06 .c .pic01,#lm06 .c .pic02,#lm06 .c .pic03,#lm06 .c .pic04{ position: absolute; width: 232px; height: 170px; } #lm06 .c .pic01,#lm06 .c .pic02{ top: 120px; } #lm06 .c .pic03,#lm06 .c .pic04{ top: 305px; } #lm06 .c .pic02,#lm06 .c .pic04{ left: 242px; } #lm06 .c01{ background: url(../img/lm06_c01.png) top right no-repeat; } #lm06 .c02{ background: url(../img/lm06_c02.png) top right no-repeat; } #lm06 .c03{ background: url(../img/lm06_c03.png) top right no-repeat; } #lm06 .c04{ background: url(../img/lm06_c04.png) top right no-repeat; } #lm06 .c01 .pic01{ background: url(../img/lm06_c01_pic01.png) no-repeat; } #lm06 .c01 .pic02{ background: url(../img/lm06_c01_pic02.png) no-repeat; } #lm06 .c01 .pic03{ background: url(../img/lm06_c01_pic03.png) no-repeat; } #lm06 .c01 .pic04{ background: url(../img/lm06_c01_pic04.png) no-repeat; } #lm06 .c02 .pic01{ background: url(../img/lm06_c02_pic01.png) no-repeat; } #lm06 .c02 .pic02{ background: url(../img/lm06_c02_pic02.png) no-repeat; } #lm06 .c02 .pic03{ background: url(../img/lm06_c02_pic03.png) no-repeat; } #lm06 .c02 .pic04{ background: url(../img/lm06_c02_pic04.png) no-repeat; } #lm06 .c03 .pic01{ background: url(../img/lm06_c03_pic01.png) no-repeat; } #lm06 .c03 .pic02{ background: url(../img/lm06_c03_pic02.png) no-repeat; } #lm06 .c03 .pic03{ background: url(../img/lm06_c03_pic03.png) no-repeat; } #lm06 .c03 .pic04{ background: url(../img/lm06_c03_pic04.png) no-repeat; } #lm06 .c04 .pic01{ background: url(../img/lm06_c04_pic01.png) no-repeat; } #lm06 .c04 .pic02{ background: url(../img/lm06_c04_pic02.png) no-repeat; } #lm06 .c04 .pic03{ background: url(../img/lm06_c04_pic03.png) no-repeat; } #lm06 .c04 .pic04{ background: url(../img/lm06_c04_pic04.png) no-repeat; } #lm06 .c .pic01 p,#lm06 .c .pic02 p,#lm06 .c .pic03 p,#lm06 .c .pic04 p{ position: absolute; bottom: 0; width: 100%; height: 35px; text-align: center; line-height: 35px; background: url(../img/lm06_pic_mb.png) repeat-x; font-size: 18px; color: #fff; } #lm06 .xx{ position: absolute; left: 50%; bottom: 0; width: 1200px; height: 125px; background: url(../img/lm06_xx.png) repeat-x; margin-left: -600px; } #lm06 .lbtn,#lm06 .rbtn{ position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; } #lm06 .lbtn{ left: 13px; background: url(../img/lm06_xx_lbtn.png) no-repeat; } #lm06 .rbtn{ right: 13px; background: url(../img/lm06_xx_rbtn.png) no-repeat; } #lm06 .xx_list{ position: absolute; left: 60px; top: 50%; width: 860px; height: 85px; margin-top: -42.5px; } #lm06 .xx_list li{ position: relative; width: 200px; height: 85px; } #lm06 .xx_list .xx01{ background: #9e9e9e url(../img/lm06_xx01.png) left center no-repeat; } #lm06 .xx_list .xx02{ background: #9e9e9e url(../img/lm06_xx02.png) left center no-repeat; } #lm06 .xx_list .xx03{ background: #9e9e9e url(../img/lm06_xx03.png) left center no-repeat; } #lm06 .xx_list .xx04{ background: #9e9e9e url(../img/lm06_xx04.png) left center no-repeat; } #lm06 .ml20{ margin-left: 20px; } #lm06 .xx_list li.show{ background-color: #29a7e1; } #lm06 .xx_list .name{ position: absolute; left: 105px; top: 20px; width: 80px; text-align: center; font-size: 24px; color: #fff; } #lm06 .xx_list .zz{ position: absolute; left: 105px; top: 50px; width: 80px; text-align: center; font-size: 18px; color: #fff; } #lm06 .btn{ position: absolute; right: 100px; bottom: 150px; width: 180px; height: 40px; text-align: center; line-height: 40px; background: #f9b64b; font-size: 18px; color: #fff; border-radius: 40px; } /*****常见热点 项目问题*****/ #lm07{ width: 100%; height: 235px; background: #fff; } #lm07 .content{ width: 1200px; height: 146px; margin: 40px auto; } #lm07 .t{ float: left; width: 184px; height: 84px; text-align: center; line-height: 42px; padding: 31px 0; background: #ff7963; font-weight: bold; font-size: 30px; color: #fff; } #lm07 .wz01{ float: left; margin-left: 4px; width: 250px; text-align: center; font-size: 18px; color: #333; } #lm07 .wz01_01,#lm07 .wz01_02{ height: 71px; line-height: 71px; } #lm07 .wz01_01{ background: #e8e6e6; } #lm07 .wz01_02{ margin-top: 4px; background: #f7f7f7; } #lm07 .wz02{ float: left; margin-left: 4px; width: 250px; text-align: center; font-size: 18px; color: #333; } #lm07 .wz02_01,#lm07 .wz02_02,#lm07 .wz02_03{ height: 46px; line-height: 46px; } #lm07 .wz02_01{ background: #e8e6e6; } #lm07 .wz02_02{ margin-top: 4px; background: #d1d1d1; } #lm07 .wz02_03{ margin-top: 4px; background: #f7f7f7; } #lm07 a{ display: block; width: 100%; height: 100%; color: #333; cursor: pointer; } /*****优典品牌*****/ #lm08{ width: 100%; height: 550px; margin-bottom: 40px; background: url(../img/lm08.png) center no-repeat; } #lm08 .logo{ float: left; width: 100%; height: 210px; background: url(../img/lm08_logo.png) center 60px no-repeat; } #lm08 .wz01{ float: left; width: 100%; text-align: center; line-height: 45px; font-size: 24px; color: #fff; } #lm08 .wz02{ float: left; width: 100%; text-align: center; line-height: 70px; font-weight: bold; font-size: 30px; color: #f8b62a; } #lm08 a{ display: block; width: 230px; height: 38px; margin: 15px auto; text-align: center; line-height: 38px; background: #ff7963; font-size: 22px; color: #fff; border-radius: 8px; } /*****专家团队部分样式*****/ #zj{ position: relative; width: 100%; height: 1000px; overflow: hidden; background: #fff; margin-top: 40px; margin-bottom: 20px; } #zj h2{ float: left; width: 100%; text-align: center; font-size: 45px; color: #666; margin-top: 30px; } #zj h2 span{ color: #29a7e1; } #zj .t{ float: left; width: 100%; text-align: center; font-size: 34px; color: #666; } #zj .pc-slide{ position: absolute; top: 180px; left: 50%; width: 1200px; margin-left: -600px; } #zj .view{ position: absolute; left: 50%; top: 240px; width: 2200px; height: 600px; margin-left: -1100px; background: url(../img/bg.jpg) no-repeat; } #zj .view .swiper-container{ position: absolute; left: 500px; width: 1200px; height: 600px; } #zj .view .swiper-slide{ width: 1200px; overflow: hidden; } #zj .view .swiper-slide a{ display: block; width: 100%; height: 100%; overflow: hidden; } #zj .view .swiper-slide img{ margin-left: -10px; } #zj .preview{width:100%; position:relative; top: 30px; } #zj .preview .swiper-container{ position: absolute; width: 990px;height:175px; margin: 0 auto; top : ; left: 50%; margin-left: -495px;} #zj .preview .swiper-wrapper{ position: absolute; width: 2000px !important; } #zj .preview .swiper-slide{width:125px;height:175px; margin: 0 20px;} #zj .preview .swiper-slide p{ width: 100%; height: 50px; line-height: 40px; text-align: center; font-size: 20px; color: #666; } #zj .preview .arrow-left{background:url(../img/index_zj_lbtn.png) no-repeat left center; position:absolute; left:30px; top:50%; margin-top:-25px; width:50px; height: 175px; z-index:10; } #zj .preview .arrow-right{background:url(../img/index_zj_rbtn.png) no-repeat left center; position:absolute; right:30px;top:50%;margin-top:-25px;width:50px;height:175px;z-index:10;} #zj .preview .swiper-slide-active p{ font-weight: bold; color: #29a7e1; }