#motorconverter{ width:100%; height:auto; margin:0 auto; padding:0px; } #motorconverter_video{ width:100%; min-width:1200px; height:644px;overflow:hidden; } #motorconverter_video .mvideo{ width:100%; height:644px; position:absolute; } #motorconverter_video h2{ width:760px; height:80px; font-size:48px; line-height:68px; margin:233px auto 10px; color:#ffffff; text-align:center; } #motorconverter_video p{ width:760px; height:100px; font-size:18px; line-height:28px; margin:10px auto; color:#ffffff; text-align:center; } #motorconverter_video .lunbo_video_s{ width:1920px; height:644px; } #motorconverter_diagram_pc{ width:100%; min-width:1200px; height:964px; padding-top:0px; background:#111111; float:left; } #motorconverter_diagram_pc h2{ width:760px; height:50px; font-size:40px; line-height:60px; margin:82px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_pc_content{ width:1200px; height:auto;margin: 0 auto; padding-top:22px; } #motorconverter_diagram_pc_show{ width:1200px; height:auto; float:left; margin:0px 0px 18px; } #motorconverter_diagram_pc_show>ol{ width:1200px; margin:0 auto; } #motorconverter_diagram_pc_show>ol>li{ display:none; } #motorconverter_diagram_pc_show>ol>li:first-child{ display:block; } #motorconverter_diagram_pc_btn{ width:1200px; margin: 0 auto; height:250px; cursor:pointer; } #motorconverter_diagram_pc_btn li{ width:300px; height:220px; float:left; } .diagram_pc_btn_ico1{ width:75px; height:75px; margin:0 auto; background:url(../images/app/motorconverter/diagram_pc_photo_ico_1@2x.png) no-repeat center center; background-size:cover; } .diagram_pc_btn_ico2{ width:75px; height:75px; margin:0 auto; background:url(../images/app/motorconverter/diagram_pc_photo_ico_2@2x.png) no-repeat center center; background-size:cover; } .diagram_pc_btn_ico3{ width:75px; height:75px; margin:0 auto; background:url(../images/app/motorconverter/diagram_pc_photo_ico_3@2x.png) no-repeat center center; background-size:cover; } .diagram_pc_btn_ico4{ width:75px; height:75px; margin:0 auto; background:url(../images/app/motorconverter/diagram_pc_photo_ico_4@2x.png) no-repeat center center; background-size:cover; } #motorconverter_diagram_pc_btn .p_active>h2,#motorconverter_diagram_pc_btn .p_active>ol>li{ color:#8fc31f; } #motorconverter_diagram_pc_btn .p_active>p{ color:#8fc31f; } #motorconverter_diagram_pc_btn .p_active .diagram_pc_btn_ico1{ background:url(../images/app/motorconverter/diagram_pc_photo_ico_5@2x.png) no-repeat center center; background-size:cover; } #motorconverter_diagram_pc_btn .p_active .diagram_pc_btn_ico2{ background:url(../images/app/motorconverter/diagram_pc_photo_ico_6@2x.png) no-repeat center center; background-size:cover; } #motorconverter_diagram_pc_btn .p_active .diagram_pc_btn_ico3{ background:url(../images/app/motorconverter/diagram_pc_photo_ico_7@2x.png) no-repeat center center; background-size:cover; } #motorconverter_diagram_pc_btn .p_active .diagram_pc_btn_ico4{ background:url(../images/app/motorconverter/diagram_pc_photo_ico_8@2x.png) no-repeat center center; background-size:cover; } #diagram_pc_btn_1{ padding:6px 46px; } #diagram_pc_btn_2{ padding:6px 54px; } #diagram_pc_btn_3{ padding:6px 20px; } #diagram_pc_btn_4{ padding:6px 54px; } #diagram_pc_btn_1 h2,#diagram_pc_btn_2 h2,#diagram_pc_btn_3 h2,#diagram_pc_btn_4 h2{ width:100%; height: 36px; margin:10px auto; font-size: 24px; line-height: 36px; display: block; text-align: center; color:#ffffff; } #diagram_pc_btn_1 p,#diagram_pc_btn_2 p,#diagram_pc_btn_3 p,#diagram_pc_btn_4 p{ width:100%; font-size: 16px; line-height: 28px; display: block; text-align: center; color:#c9caca; } .motorconverter-button{ width:180px; height:50px; background:#89c122; color:#ffffff !important; font-size:16px; line-height:50px; text-align:center; display:block; float:left; border-radius:4px; margin:5px 12px; } .motorconverter-button:hover{ background:#83b31d; } @media (min-width: 300px) { #motorconverter_video{ width:100%; min-width:300px; height:175px; overflow:hidden; background:url(../images/app/motorconverter/motorconverter_video_s.jpg) no-repeat; background-size:100% 100%; } #motorconverter_video .mvideo{ width:100%; height:175px; position:absolute; } #motorconverter_video h2{ width:260px; height:32px; font-size:20px; line-height:32px; margin:73px auto 6px; color:#ffffff; text-align:center; font-weight:bold; } #motorconverter_video p{ display:none; } #motorconverter_video .lunbo_video_s{ width:300px; height:101px; display:none; } #motorconverter_diagram_mobile{ width:100%; height:auto; background:#111111; margin: 0px auto; padding:36px 10px 20px; } #motorconverter_diagram_mobile h2{ font-size:24px; line-height:38px; margin:14px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_mobile_content{ width:100%; max-width:780px; margin:0 auto; } #motorconverter_diagram_mobile_btn{ width:100%; height:auto; overflow:hidden; margin-top:20px; } #motorconverter_diagram_mobile_btn li{ width:100%; float:left; margin-bottom:10px; } #diagram_mobile_btn_1,#diagram_mobile_btn_2,#diagram_mobile_btn_3,#diagram_mobile_btn_4{ width:100%; height:50px; float:left; margin-left:4px; margin-right:10px; margin-bottom:10px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:center; margin:0px auto 0px;} #motorconverter_diagram_mobile_btn p{ font-size:14px; line-height:28px; color:#c9caca; text-align:center; padding:0px 15px; } #motorconverter_diagram_m1{ width:100%; height:950px; background:url(../images/app/motorconverter/m1_bg_mob.jpg) no-repeat bottom center #282828; margin: 0px auto; padding:0px 10px 40px; overflow:hidden; } #motorconverter_diagram_m1 h2{ font-size:24px; line-height:38px; color:#ffffff; text-align:center; margin:52px auto 4px auto; display:block; } #greenpower_diagram_m3_content{ width:100%; height:auto; margin:0px auto; overflow:hidden; } #motorconverter_diagram_m1_content ul{ width:100%; height:auto; margin-top:30px; } #motorconverter_diagram_m1_content ul li{ width:100%; height:260px; float:left; padding:0 20px; margin-bottom:20px; } #m1_ico1,#m1_ico2,#m1_ico3{ width:100px; height:100px; margin:0 auto; } #motorconverter_diagram_m1_content h2{ width:100%; height:40px; font-size:18px; line-height:36px; margin:10px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_m1_content p{ width:100%; height:auto; font-size:14px; line-height:28px; color:#d5d5d5; text-align:center; } #motorconverter_diagram_m2{ width:100%; height:auto; background:#f0f1f2; margin: 0px auto; padding:46px 10px 40px; overflow:hidden; } #motorconverter_diagram_m2_content{ width:100%; height:auto; margin:0px auto; overflow:hidden; } #motorconverter_diagram_m2 h2{ font-size:24px; line-height:38px; color:#333; text-align:center; margin:4px auto 4px auto; display:block; } #motorconverter_diagram_m2 a{ color:#000; } .diagram_m2_group{ width:100%; height:auto; float:left; background:#ffffff; margin:10px 26px 16px 0px; overflow:hidden; padding:0px; } .diagram_m2_group h2{ font-size:18px !important; line-height:24px !important; color:#1d1d1f !important; margin:25px auto 10px auto !important; } .diagram_m2_pro{ width:280px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:100px; height:100px; float:left; padding-top:10px; } .diagram_m2_pro_r{ width:180px; height:100px; float:left; padding-left:10px; } .diagram_m2_pro_r h3{ font-size:14px; line-height:26px; font-weight:bold; margin-top:5px; margin-bottom:0px; } .diagram_m2_pro_r ul{ width:100%; height:auto; color:#585858; } .diagram_m2_pro_r ul li{ width:100%; font-size:12px; line-height:20px; background:url(../images/app/motorconverter/diagram_m2_pro_d.png) no-repeat 2px 8px; padding-left:12px; } .diagram_m2_btn{ width:150px; height:70px; margin:10px auto; overflow:hidden; } .motorconverter-button{ width:120px; height:30px; background:#89c122; color:#ffffff !important; font-size:12px; line-height:30px; text-align:center; display:block; float:left; border-radius:4px; margin:5px 8px; } } /*閽堝iphone5s*/ @media (min-width: 315px) { #motorconverter_video{ height:184px; } #motorconverter_video .mvideo{ width:100%; height:184px; position:absolute; } #motorconverter_video h2{ width:260px; height:32px; font-size:20px; line-height:32px; margin:75px auto 6px; } } /*閽堝1080*1920鐨刟ndroid*/ @media (min-width: 360px) { #motorconverter_video{ height:210px; } #motorconverter_video .mvideo{ width:100%; height:210px; position:absolute; } #motorconverter_video h2{ width:300px; height:32px; font-size:20px; line-height:32px; margin:80px auto 6px; } #motorconverter_diagram_mobile_btn{ width:100%; height:auto; overflow:hidden; margin-top:20px; } #motorconverter_diagram_mobile_btn li{ width:100%; float:left; margin-bottom:30px; } #diagram_mobile_btn_1,#diagram_mobile_btn_2,#diagram_mobile_btn_3,#diagram_mobile_btn_4{ width:100%; height:50px; float:left; margin-left:4px; margin-right:10px; margin-bottom:10px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:center; margin:0px auto 0px; } #motorconverter_diagram_mobile_btn p{ font-size:14px; line-height:28px; color:#c9caca; padding:0 20px; } #motorconverter_diagram_m1{ width:100%; height:920px; } #motorconverter_diagram_m1_content ul{ width:100%; height:auto; margin-top:30px; } #motorconverter_diagram_m1_content ul li{ width:100%; height:250px; float:left; padding:0 20px; margin-bottom:20px; } .diagram_m2_pro{ width:300px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:100px; height:100px; float:left; padding-top:10px; } .diagram_m2_pro_r{ width:200px; height:100px; float:left; padding-left:10px; } .diagram_m2_pro_r ul li{ padding-left:20px; } } /*閽堝iphone6*/ @media (min-width: 375px) { #motorconverter_video{ height:219px; } #motorconverter_video .mvideo{ width:100%; height:219px; position:absolute; } #motorconverter_video h2{ width:300px; height:32px; font-size:22px; line-height:34px; margin:82px auto 6px; } } /*閽堝鍏ㄩ潰灞忓畨鍗?/ @media (min-width: 390px) { #motorconverter_video{ height:228px; } #motorconverter_video .mvideo{ width:100%; height:228px; position:absolute; } #motorconverter_video h2{ width:300px; height:34px; font-size:22px; line-height:34px; margin:86px auto 6px; } #motorconverter_diagram_mobile_btn{ width:100%; height:auto; overflow:hidden; margin-top:20px; } #motorconverter_diagram_mobile_btn li{ width:100%; float:left; margin-bottom:20px; padding-right:20px; } #motorconverter_diagram_m2{ width:100%; min-width:390px; height:auto; } #motorconverter_diagram_m2_content{ width:330px; height:auto; margin:0px auto; } .diagram_m2_pro{ width:310px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:100px; height:100px; float:left; padding-top:10px; margin-right:10px; } .diagram_m2_pro_r{ width:200px; height:100px; float:left; padding-left:10px; } } @media (min-width: 400px) { #motorconverter_video{ height:234px; } #motorconverter_video .mvideo{ width:100%; height:234px; position:absolute; } #motorconverter_video h2{ width:300px; height:34px; font-size:22px; line-height:34px; margin:88px auto 6px; } #motorconverter_diagram_m1{ width:100%; height:900px; } #motorconverter_diagram_m1_content ul{ width:100%; height:auto; margin-top:30px; } #motorconverter_diagram_m1_content ul li{ width:380px; height:240px; float:none; padding:0 20px; margin:0px auto 20px; } } /*閽堝iphone6s plus*/ @media (min-width: 410px) { #motorconverter_video{ height:239px; } #motorconverter_video .mvideo{ width:100%; height:239px; position:absolute; } #motorconverter_video h2{ width:300px; height:36px; font-size:24px; line-height:36px; margin:92px auto 6px; } #motorconverter_diagram_m2 { width:100%; min-width:390px; height:auto; } #motorconverter_diagram_m2_content{ width:360px; height:auto; margin:0px auto; } .diagram_m2_pro{ width:330px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:120px; height:100px; float:left; padding-top:10px; margin-right:10px; } .diagram_m2_pro_r{ width:200px; height:100px; float:left; padding-left:10px; } } @media (min-width: 414px) { #motorconverter_video{ height:242px; } #motorconverter_video .mvideo{ width:100%; height:242px; position:absolute; } #motorconverter_video h2{ width:320px; height:36px; font-size:24px; line-height:36px; margin:93px auto 6px; } #motorconverter_diagram_mobile { width:100%; margin: 0px auto; padding:50px 10px 20px; } } /*閽堝1440*2560鐨刟ndroid*/ @media (min-width: 480px) { #motorconverter_video{ height:280px; } #motorconverter_video .mvideo{ width:100%; height:280px; position:absolute; } #motorconverter_video h2{ width:340px; height:38px; font-size:24px; line-height:36px; margin:93px auto 6px; } #motorconverter_diagram_mobile_btn p{ font-size:14px; line-height:28px; color:#c9caca; padding:0 40px; } #motorconverter_diagram_m2 { width:100%; min-width:480px; height:auto; } #motorconverter_diagram_m2_content{ width:420px; height:auto; margin:0px auto; } .diagram_m2_pro{ width:380px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:140px; height:100px; float:left; padding-top:0px; margin-right:20px; } .diagram_m2_pro_r{ width:220px; height:100px; float:left; padding-left:10px; } } @media (min-width: 500px) { #motorconverter_video{ height:292px; } #motorconverter_video .mvideo{ width:100%; height:292px; position:absolute; } #motorconverter_video h2{ width:360px; height:40px; font-size:26px; line-height:38px; margin:120px auto 6px; } #motorconverter_diagram_mobile_btn{ width:100%; height:auto; overflow:hidden; margin-top:20px; } #motorconverter_diagram_mobile_btn li{ width:50%; height:120px; float:left; margin-bottom:10px; padding-right:10px; } #diagram_mobile_btn_1,#diagram_mobile_btn_2,#diagram_mobile_btn_3,#diagram_mobile_btn_4{ width:70px; height:110px; float:left; margin-left:4px; margin-right:10px; margin-bottom:10px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:left; margin:0px auto 0px;} #motorconverter_diagram_mobile_btn p{ font-size:14px; line-height:24px; color:#c9caca;text-align:left; padding:0 6px; } #motorconverter_diagram_m2 { width:100%; min-width:500px; height:auto; } .diagram_m2_group{ padding:0px 0px 10px; } .diagram_m2_btn{ width:170px; height:70px; margin:10px auto; overflow:hidden; } .motorconverter-button{ width:140px; height:30px; background:#89c122; color:#ffffff !important; font-size:12px; line-height:30px; text-align:center; display:block; float:left; border-radius:4px; margin:15px 18px 5px; } } @media (min-width: 600px) { #motorconverter_video{ height:350px; } #motorconverter_video .mvideo{ width:100%; height:350px; position:absolute; } #motorconverter_video h2{ width:400px; height:50px; font-size:30px; line-height:42px; } #motorconverter_diagram_mobile h2{ font-size:28px; line-height:40px; margin:2px auto 10px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:left; margin:0px auto 0px;} #motorconverter_diagram_m1{ width:100%; height:890px; } #motorconverter_diagram_m1 h2{ font-size:28px; line-height:40px; margin:52px auto 4px auto; } #motorconverter_diagram_m1_content h2{ width:100%; height:40px; font-size:24px; line-height:36px; margin:10px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_m2 { width:100%; min-width:600px; height:auto; padding:45px 10px 40px; } #motorconverter_diagram_m2 h2{ font-size:28px; line-height:40px; } #motorconverter_diagram_m2_content{ width:100%; height:auto; margin:0px auto; overflow:hidden; } .diagram_m2_group{ width:270px; height:520px; padding:0px; margin:10px 9px 16px 10px; float:left; } .diagram_m2_pro{ width:270px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:80px; height:100px; float:left; padding-top:10px;margin-right:0px; } .diagram_m2_pro_r{ width:190px; height:100px; float:left; padding-left:10px; } } @media (min-width: 700px) { #motorconverter_video{ height:409px; } #motorconverter_video .mvideo{ width:100%; height:409px; position:absolute; } #motorconverter_video h2{ width:500px; height:60px; font-size:38px; line-height:52px; margin:140px auto 6px; } #motorconverter_video p{ width:600px; height:100px; font-size:18px; line-height:28px; margin:10px auto; color:#ffffff; text-align:center; display:block; } #motorconverter_diagram_mobile h2{ font-size:32px; line-height:48px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:left; margin:0px auto 0px; } #motorconverter_diagram_m1{ width:100%; height:900px; } #motorconverter_diagram_m1 h2{ font-size:32px; line-height:48px; } #motorconverter_diagram_m1_content h2{ width:100%; height:40px; font-size:24px; line-height:36px; margin:10px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_m2 { width:100%; min-width:700px; height:auto; padding:52px 10px 40px; } #motorconverter_diagram_m2 h2{ font-size:32px; line-height:48px; } .diagram_m2_group{ width:320px; padding:0px; margin:10px 9px 16px 11px; float:left; } .diagram_m2_pro{ width:320px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:110px; height:100px; float:left; padding-top:10px; margin-left:6px;margin-right:4px; } .diagram_m2_pro_r{ width:200px; height:100px; float:left; padding-left:10px; } .diagram_m2_btn{ width:414px; height:70px; margin:10px auto; overflow:hidden; padding:0 120px; } } @media (min-width: 767px) { #motorconverter_video{ height:448px; background-size:100% 100%;} #motorconverter_video .mvideo{ width:767px; height:448px; position:absolute; } #motorconverter_video h2{ width:500px; height:60px; font-size:38px; line-height:52px; margin:140px auto 6px; } #motorconverter_diagram_mobile h2{ font-size:40px; line-height:60px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:left; margin:0px auto 0px; } #motorconverter_diagram_m1{ width:100%; height:900px; } #motorconverter_diagram_m1 h2{ font-size:40px; line-height:60px; } #motorconverter_diagram_m1_content ul li{ width:500px; height:240px; float:none; padding:0 20px; margin:0px auto 20px; } #motorconverter_diagram_m1_content h2{ width:100%; height:40px; font-size:24px; line-height:36px; margin:10px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_m2 { width:100%; min-width:767px; height:auto; } #motorconverter_diagram_m2 h2{ font-size:40px; line-height:60px; color:#333; text-align:center; margin:6px auto 7px auto; } #motorconverter_diagram_m2_content{ width:100%; height:auto; padding:0px 10px; overflow:hidden; } .diagram_m2_group{ width:330px; padding:0px; margin:10px 0px 16px 20px; float:left; } .diagram_m2_pro{ width:330px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:120px; height:100px; float:left; padding-top:10px; margin-left:6px;margin-right:4px; } .diagram_m2_pro_r{ width:200px; height:100px; float:left; padding-left:10px; } .diagram_m2_btn{ width:394px; height:70px; margin:10px auto; overflow:hidden; padding:0 106px; } } @media (min-width: 770px) { #motorconverter_video{ height:450px; background-size:100% 100%;} #motorconverter_video .mvideo{ width:770px; height:450px; position:absolute; } } @media (min-width: 785px) { #motorconverter_video{ height:458px; background-size:100% 100%;} #motorconverter_video .mvideo{ width:785px; height:458px; position:absolute; } } @media (min-width: 800px) { #motorconverter_diagram_mobile_btn{ width:100%; height:auto; overflow:hidden; margin-top:30px; } #motorconverter_diagram_mobile_btn li{ width:50%; height:120px; float:left; margin-bottom:10px; padding-left:20px; padding-right:20px; } #diagram_mobile_btn_1,#diagram_mobile_btn_2,#diagram_mobile_btn_3,#diagram_mobile_btn_4{ width:70px; height:90px; float:left; margin-left:4px; margin-right:10px; margin-bottom:10px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:left; margin:0px auto 0px;} #motorconverter_diagram_mobile_btn p{ font-size:14px; line-height:24px; color:#c9caca; } } @media (min-width: 880px) { #motorconverter_video{ height:514px; background-size:100% 100%;} #motorconverter_video .mvideo{ width:880px; height:514px; position:absolute; } #motorconverter_video p{ width:660px; } #motorconverter_diagram_mobile h2{ font-size:40px; line-height:60px; } #motorconverter_diagram_mobile_btn h2{ font-size:18px; line-height:36px; color:#ffffff; text-align:left; margin:0px auto 0px;} #motorconverter_diagram_mobile_btn li{ width:50%; height:120px; float:left; margin-bottom:10px; padding-left:30px; padding-right:20px; } #motorconverter_diagram_m1{ width:100%; min-width:880px; height:530px; background:url(../images/app/motorconverter/m1_bg.jpg) no-repeat center center; margin: 0px auto; padding:36px 10px 20px; overflow:hidden; } #motorconverter_diagram_m1 h2{ font-size:40px; line-height:60px; color:#ffffff; text-align:center; margin:22px auto 7px auto; } #motorconverter_diagram_m1_content{ width:100%; max-width:880px; margin:0 auto; } #motorconverter_diagram_m1_content ul{ width:100%; height:330px; margin-top:60px; } #motorconverter_diagram_m1_content ul li{ width:33%; float:left; padding:0 20px; } #m1_ico1,#m1_ico2,#m1_ico3{ width:100px; height:100px; margin:0 auto; } #motorconverter_diagram_m1_content h2{ width:100%; height:40px; font-size:22px; line-height:34px; margin:50px auto 0px; color:#ffffff; text-align:center; } #motorconverter_diagram_m1_content p{ width:100%; height:50px; font-size:14px; line-height:26px; color:#d5d5d5; text-align:center; } #motorconverter_diagram_m2 { width:100%; min-width:880px; height:auto; } #motorconverter_diagram_m2_content{ width:100%; height:auto; padding:0px 31px; overflow:hidden; } .diagram_m2_group{ width:360px; padding:0px; margin:10px 18px 26px 20px; float:left; } .diagram_m2_pro{ width:360px; height:100px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:120px; height:100px; float:left; padding-top:10px; margin-left:10px; margin-right:6px; } .diagram_m2_pro_r{ width:220px; height:100px; float:left; padding-left:10px; } .diagram_m2_btn{ width:444px; height:70px; margin:10px auto; overflow:hidden; padding:0 132px; } } @media (min-width: 980px) { #motorconverter_video{ height:572px; background-size:100% 100%;} #motorconverter_video .mvideo{ width:980px; height:572px; position:absolute; } #motorconverter_diagram_mobile_btn{ width:80%; height:auto; overflow:hidden; margin:30px auto 10px; } #motorconverter_diagram_mobile_btn li{ width:50%; height:120px; float:left; margin-bottom:10px; padding-left:20px; padding-right:20px; } #motorconverter_diagram_m2 { width:100%; min-width:980px; height:auto; } #motorconverter_diagram_m2_content{ width:100%; height:auto; padding:0px 38px; overflow:hidden; } .diagram_m2_group{ width:400px; height:600px; padding:0px; margin:10px 18px 26px 20px; float:left; } .diagram_m2_pro{ width:400px; height:120px; margin:5px auto 10px; } .diagram_m2_pro_l{ width:126px; height:110px; float:left; padding-top:10px; margin-left:10px; margin-right:6px; } .diagram_m2_pro_r{ width:250px; height:110px; float:left; padding-left:10px; } .diagram_m2_btn{ width:600px; height:70px; margin:10px auto; overflow:hidden; padding:0 210px; } } @media (min-width: 1024px) { #motorconverter{ width:100%; height:auto; margin:0 auto; padding:0px;} #motorconverter_video{ width:100%; min-width:1024px; height:644px;overflow:hidden; background:none;} #motorconverter_video .mvideo{ width:100%; height:644px; position:absolute; } #motorconverter_video h2{ width:760px; height:80px; font-size:48px; line-height:68px; margin:233px auto 10px; color:#ffffff; text-align:center; } #motorconverter_video p{ width:724px; height:100px; font-size:18px; line-height:28px; margin:10px auto; color:#ffffff; text-align:center; } #motorconverter_video .lunbo_video_s{ width:1920px; height:644px; display:block; } #motorconverter_diagram_m1{ width:100%; min-width:1024px; height:744px; background:url(../images/app/motorconverter/m1_bg.jpg) no-repeat center; margin: 0px auto; padding:36px 10px 20px; overflow:hidden; } #motorconverter_diagram_m1 h2{ font-size:40px; line-height:60px; color:#ffffff; text-align:center; margin:65px auto 7px auto; } #motorconverter_diagram_m1_content{ width:100%; max-width:1200px; margin:0 auto; } #motorconverter_diagram_m1_content ul{ width:100%; height:600px; margin-top:130px; } #motorconverter_diagram_m1_content ul li{ width:33%; float:left; padding:0 20px; } #m1_ico1,#m1_ico2,#m1_ico3{ width:100px; height:100px; margin:0 auto; } #motorconverter_diagram_m1_content h2{ width:100%; height:50px; font-size:28px; line-height:38px; margin:50px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_m1_content p{ width:100%; height:50px; font-size:16px; line-height:28px; color:#d5d5d5; text-align:center; } #motorconverter_diagram_m2{ width:100%; height:auto; background:#f0f1f2; margin: 0px auto; padding:60px 10px 100px; overflow:hidden; } #motorconverter_diagram_m2_content{ width:1024px; height:auto; margin:0px auto; overflow:hidden; padding:0px; } #motorconverter_diagram_m2 h2{ font-size:40px; line-height:60px; color:#333; text-align:center; margin:35px auto 36px auto; display:block; } #motorconverter_diagram_m2 a{ color:#000; } .diagram_m2_group{ width:470px; height:790px; float:left; background:#ffffff; margin:10px 20px 70px; overflow:hidden; } .diagram_m2_group h2{ font-size:24px !important; line-height:36px !important; color:#1d1d1f !important; margin:55px auto 18px auto !important; } .diagram_m2_pro{ width:400px; height:150px; margin:13px auto 0px; } .diagram_m2_pro_l{ width:172px; height:150px; float:left; padding-top:16px; margin:0px; } .diagram_m2_pro_r{ width:228px; height:150px; float:left; padding-left:10px; margin:0px; } .diagram_m2_pro_r h3{ font-size:16px; line-height:28px; font-weight:bold; margin-top:25px; margin-bottom:0px; } .diagram_m2_pro_r ul{ width:100%; height:auto; color:#585858; } .diagram_m2_pro_r ul li{ width:100%; font-size:14px; line-height:22px; background:url(../images/app/motorconverter/diagram_m2_pro_d.png) no-repeat 2px 8px; padding-left:20px; } .diagram_m2_btn{ width:210px; height:70px; margin:10px auto; overflow:hidden; padding:0px; } .motorconverter-button{ width:180px; height:50px; background:#89c122; color:#ffffff !important; font-size:16px; line-height:50px; text-align:center; display:block; float:left; border-radius:4px; margin:5px 12px; } .diagram_m2_group a:hover h3{ color:#8fc31f !important; } .diagram_m2_group a:hover li{ background:url(../images/app/motorconverter/diagram_m2_pro_d2.png) no-repeat 2px 8px; color:#8fc31f !important; } } @media (min-width: 1080px) { #motorconverter_video{ width:100%; min-width:1080px; height:644px;overflow:hidden; } #motorconverter_diagram_m1_content ul li{ width:33%; float:left; padding:0 30px; } #motorconverter_diagram_m2_content{ width:1080px; height:auto; margin:0px auto; overflow:hidden; } .diagram_m2_group{ width:500px; height:790px; float:left; background:#ffffff; margin:10px 20px 70px; overflow:hidden; } } @media (min-width: 1200px) { #motorconverter_video{ width:100%; min-width:1200px; height:644px;overflow:hidden; } #motorconverter_diagram_m1{ width:100%; min-width:1024px; height:744px; background:url(../images/app/motorconverter/m1_bg2.jpg) no-repeat center #272727; margin: 0px auto; padding:36px 10px 20px; overflow:hidden; } #motorconverter_diagram_m1 h2{ font-size:40px; line-height:60px; color:#ffffff; text-align:center; margin:65px auto 7px auto; } #motorconverter_diagram_m1_content{ width:100%; max-width:1200px; margin:0 auto; } #motorconverter_diagram_m1_content ul{ width:100%; height:600px; margin-top:130px; } #motorconverter_diagram_m1_content ul li{ width:33%; float:left; padding:0 60px; } #m1_ico1,#m1_ico2,#m1_ico3{ width:100px; height:100px; margin:0 auto; } #motorconverter_diagram_m1_content h2{ width:100%; height:50px; font-size:28px; line-height:38px; margin:50px auto 10px; color:#ffffff; text-align:center; } #motorconverter_diagram_m1_content p{ width:100%; height:50px; font-size:16px; line-height:28px; color:#d5d5d5; text-align:center; } #motorconverter_diagram_m2{ width:100%; height:auto; background:#f0f1f2; margin: 0px auto; padding:60px 10px 100px; overflow:hidden; } #motorconverter_diagram_m2_content{ width:1200px; height:auto; margin:0px auto; overflow:hidden; } #motorconverter_diagram_m2 h2{ font-size:40px; line-height:60px; color:#333; text-align:center; margin:35px auto 36px auto; display:block; } #motorconverter_diagram_m2 a{ color:#000; } .diagram_m2_group{ width:560px; height:790px; float:left; background:#ffffff; margin:10px 20px 70px; overflow:hidden; } .diagram_m2_group h2{ font-size:24px !important; line-height:36px !important; color:#1d1d1f !important; margin:55px auto 18px auto !important; } .diagram_m2_pro{ width:400px; height:150px; margin:13px auto 0px; } .diagram_m2_pro_l{ width:172px; height:150px; float:left; padding-top:16px; } .diagram_m2_pro_r{ width:228px; height:150px; float:left; padding-left:10px; } .diagram_m2_pro_r h3{ font-size:16px; line-height:28px; font-weight:bold; margin-top:25px; margin-bottom:0px; } .diagram_m2_pro_r ul{ width:100%; height:auto; color:#585858; } .diagram_m2_pro_r ul li{ width:100%; font-size:14px; line-height:22px; background:url(../images/app/motorconverter/diagram_m2_pro_d.png) no-repeat 2px 8px; padding-left:20px; } .diagram_m2_btn{ width:206px; height:70px; margin:10px auto; overflow:hidden; } .diagram_m2_group a:hover h3{ color:#8fc31f !important; } .diagram_m2_group a:hover li{ background:url(../images/app/motorconverter/diagram_m2_pro_d2.png) no-repeat 2px 8px; color:#8fc31f !important; } }