.saleInfo{ width: 100%; float: left; line-height: 64px; background-color: #D8213F; font-size: 16px; color: rgba(255,255,255,0.8); text-align: center} .saleInfo a{ color: rgba(255,255,255,0.8); text-decoration: underline; margin-left: 5px} .home{ width:100%; float: left; overflow:hidden; position:relative; margin: -64px 0 16px} .home .box{ width:100%; height:768px; float:left; overflow:hidden; position:relative; left:0; top:0} .home ul{ width:2000%; height:768px; float:left; transition:transform .6s ease; -webkit-transition:transform .6s ease} .home li{ width:5%; height:768px; float:left; overflow:hidden; position:relative} .home .link{ width: 100%; float: left; position: relative} .home .img{ width:2560px; height:768px; float:left; overflow:hidden; position:absolute; left:50%; top:0; margin:0 0 0 -1280px} .home .img img{ width:2560px; height:768px; float:left; position: absolute; top: 0; left: 0} .home .video{ width: 2560px; float: left; position:relative; left:50%; top:0; margin:0 0 0 -1280px} .home .tit_box{ width: 500px; float: left; position: absolute; top: 288px; margin-left: 88px} .home .tit_box.top_228{ top: 228px} .home .tit_box.top_248{ top: 248px} .home .tit_box .t_1{ width: 100%; float: left; font-size: 42px; color: #fff; line-height: 48px} .home .tit_box .t_2{ width: 100%; float: left; font-size: 20px; color: #fff; line-height: 30px; margin-top: 18px} .home .tit_box .t_3{ width: 128px; height: 40px; float: left; background-color: #F02546; color: #fff; font-size: 16px; text-align: center; line-height: 40px; border-radius: 50px; margin-top: 37px} .home .tit_box_black .t_1{ color: #000} .home .tit_box_black .t_2{ color: #000} .home .tit_box_2{ width: 800px} .home .tit_box_2 .t_1{ color: #1B1B1B; font-size: 60px; line-height: 60px; font-family:"MiSans Medium"} .home .tit_box_2 .t_1 .co_1{ color: #6A994E} .home .tit_box_2 .t_1 .co_2{ color: #FF0000} .home .tit_box_2 .t_1 .co_3{ color: #FF7831} .home .tit_box_2 .t_2{ color: #1B1B1B; font-size: 48px; line-height: 60px; font-family:"MiSans Light"; padding-top: 10px} .home .tit_box_2 .t_2.fz_44{ font-family:"MiSans Medium"; color: #333; font-size: 44px; letter-spacing: 22px} .home .tit_box_2 .t_4{ width: 100%; float: left; color: #1B1B1B; font-size: 42px; line-height: 60px; font-family:"MiSans Light"; padding-top: 140px} .home .tit_box_2 .t_4 .ff_ms{ font-family:"MiSans Semibold"} .home .tit_box_3{ width: 800px} .home .tit_box_3 .t_1{ color: #fff; font-size: 43px; line-height: 48px; font-family:"MiSans Light"} .home .tit_box_3 .t_1 .tag{ width: 148px; float: left; color: #050505; font-size: 32px; font-family:"MiSans Medium"; text-align: center; margin-left: 23px; border-radius: 5px; background-image: linear-gradient(to right,#FDFDFD,#A4A4A4)} .home .tit_box_3 .t_2{ color: #fff; font-size: 84px; line-height: 84px; font-family:"MiSans Medium"; padding-top: 0} .home .tit_box_3 .t_2.fs_60{ font-size: 50px; line-height: 70px} .home .tit_box_3 .t_3{ width: 318px; height: 54px; line-height: 54px; float: left; color: #fff; border: 2px solid #F62542; border-radius: 50px; background-color: transparent} .home .tit_box_3 .t_3 .t{ width: 194px; float: left; background-color: #F62542; font-size: 28px; text-align: center; border-radius:46px 50px 50px 46px; margin-left: -1px; font-family:"MiSans Medium"} .home .tit_box_3 .t_3 .price{ width: 102px; float: left; text-align: center} .home .tit_box_3 .t_3 .price .fs_30{ font-size: 30px; font-family:"MiSans Medium"} .home .tit_box_3 .t_3.v_2{ width: 270px; height: 44px; line-height: 44px; border-color: #EA7941} .home .tit_box_3 .t_3.v_2 .t{ width: 166px; font-size: 24px; background-color: #EA7941} .home .tit_box_3 .t_3.v_2 .price{ width: 88px} .home .tit_box_3 .t_3.v_2 .price .fs_30{ font-size: 28px} .home .tit_box_4{ width: 800px} .home .tit_box_4 .t_1{ color: #fff; font-size: 58px; line-height: 60px; font-family:"MiSans Medium"; padding-top: 30px} .home .tit_box_4 .t_1 .co_1{ color: #FF7831} .home .tit_box_4 .t_2{ color: #fff; font-size: 36px; line-height: 50px; font-family:"MiSans Light"} .home .tit_box_5{ width: 800px} .home .tit_box_5 .t_1{ color: #333; font-size: 60px; line-height: 60px; font-family:"MiSans Medium"} .home .tit_box_5 .t_2{ color: #575657; font-size: 38px; line-height: 40px; font-family:"MiSans Light"; padding-top: 10px} .home .tit_box_5 .t_3{ width: 338px; height: 57px; line-height: 57px; float: left; color: #fff; border: 2px solid #FF0036; border-radius: 22px; background-color: transparent; margin-top: 52px} .home .tit_box_5 .t_3 .t{ width: 208px; float: left; background-color: #FF0036; font-size: 32px; text-align: center; border-radius:22px; margin-left: -1px; font-family:"MiSans Medium"} .home .tit_box_5 .t_3 .price{ width: 122px; float: left; color: #FF0036; text-align: center} .home .tit_box_5 .t_3 .price .fs_30{ font-size: 38px; font-family:"MiSans Medium"} .prev, .next{ width:26px; height:46px; float:left; position:absolute; top:360px; left:50%; margin-left: -760px; background-position:-400px -3700px; z-index:20} .next{ margin-left: 736px; background-position:-400px -3800px} .dian_box{ width:100%; height:4px; float:left; position:absolute; bottom:32px; left:0; text-align:center; z-index:20} .dian_box a{ width:16px; height:4px; background-color:#fff; overflow:hidden; display:inline-block; margin:0 4px; border-radius: 50px; transition:all .3s ease} .dian_box .cur{ background-color: #DF001F} .product_list{ width:100%; float:left; position:relative} .product_list li{ width: calc(33.33% - 8px); height: 761px; float: left; margin:0 12px 16px 0; position:relative; overflow: hidden} .product_list li:last-child{ margin: 0 0 16px 0; float: right} .product_list .img{ width: 100%; height: 761px; float: left; text-align: center; position: relative} .product_list .img img{ width: 860px; height: 761px; float: left; position: relative; left: 50%; margin-left: -430px; transition: all 0.3s ease} .product_list li:hover img{ transform: scale(1.03)} .product_list .t_box{ width: 100%; float: left; position: absolute; top: 56px; z-index: 1} .product_list .t_1{ width: 100%; float: left; font-size: 20px; color: rgba(50,50,50,0.7); text-align: center; line-height: 28px} .product_list .t_1.co_f{ color: rgba(255,255,255,0.7)} .product_list .t_2{ width: 100%; float: left; font-size: 42px; color: rgba(50,50,50,1); text-align: center; line-height: 48px; margin-top: 13px} .product_list .t_2.co_f{ color: rgba(255,255,255,1)} .product_list .t_3{ width: 128px; float: left; font-size: 16px; color: #fff; background-color: #000; text-align: center; line-height: 40px; border-radius: 50px; position: relative; left: 50%; margin:30px 0 0 -64px} .new_list{ width: 100%; height: 784px; float: left; position: relative} .new_list .tit{ width: 100%; float: left; font-size: 32px; color: #323232; text-align: center; line-height: 40px; padding-top: 80px} .new_list .box{ width: 1620px; float: left; position: relative; left: 50%; margin:60px 0 0 -810px; transform-origin: top} .new_list .arrow_l{ width: 40px; height: 94px; float: left; background-position: -400px -3490px; margin-top:130px} .new_list .arrow_r{ width: 40px; height: 94px; float: left; background-position: -380px -3570px; margin-top:130px} .new_list .ulBox{ width: 1536px; float: left; height: 500px; position: relative; overflow: hidden} .new_list ul{ width: 20000px; float: left; height: 500px; position: relative; transition:transform .4s ease; -webkit-transition:transform .4s ease} .new_list li{ width: 496px; height: 500px; float: left; padding: 0 8px; position: relative} .new_list .img{ width: 100%; height: 368px; float: left; overflow: hidden; position: relative} .new_list .img img{ max-width: 100%; transition: all 0.3s ease} .new_list li:hover .img img{ transform: scale(1.03)} .new_list .info{ width: 432px; height: 192px; float: left; position: absolute; top: 272px; left: 40px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 12px rgba(0,0,0,0.1)} .new_list .t_1{ width: 100%; float: left; font-size: 20px; line-height: 24px; color: #323232; text-align: center; padding-top: 27px} .new_list .line{ width: 32px; height: 2px; float: left; background-color: #F02546; position: relative; left: 50%; margin:17px 0 0 -16px} .new_list .t_2{ width: 100%; float: left; font-size: 18px; line-height: 24px; color: #323232; text-align: center; padding-top: 22px} .new_list .t_3{ width: 100%; float: left; font-size: 16px; line-height: 24px; color: rgba(0,0,0,0.6); text-align: center; padding-top: 7px} .new_list .d_box{ width:100%; height:4px; float:left; margin-top:34px; text-align:center;} .new_list .d_box a{ width:16px; height:4px; background-color:#E5E5E5; overflow:hidden; display:inline-block; margin:0 4px; border-radius: 50px; transition:all .3s ease} .new_list .d_box .cur{ background-color: #DF001F} .evaluate_list{ width: 100%; height: 784px; float: left; position: relative; background-color: #F2F2F2} .evaluate_list .box{ width: 1620px; float: left; position: relative; left: 50%; margin:96px 0 0 -810px; transform-origin: top} .evaluate_list .arrow_l{ width: 40px; height: 94px; float: left; background-position: -400px -3490px; margin-top:180px} .evaluate_list .arrow_r{ width: 40px; height: 94px; float: left; background-position: -380px -3570px; margin-top:180px} .evaluate_list .ulBox{ width: 1536px; float: left; height: 592px; position: relative; overflow: hidden} .evaluate_list ul{ width: 20000px; float: left; height: 592px; position: relative; transition:transform .4s ease; -webkit-transition:transform .4s ease} .evaluate_list li{ width: 368px; height: 592px; float: left; margin: 0 8px; border-radius: 8px; overflow: hidden; position: relative} .evaluate_list .img{ width: 100%; height: 400px; float: left; overflow: hidden; position: relative} .evaluate_list .img img{ max-width: 100%} .evaluate_list .info{ width: calc(100% - 64px); height: 192px; float: left; background-color: #fff; padding: 0 32px} .evaluate_list .t_1{ width: 100%; float: left; font-size: 20px; line-height: 24px; color: #323232; padding-top: 36px} .evaluate_list .t_2{ width: 100%; float: left; font-size: 16px; line-height: 24px; color:rgba(50,50,50,0.6); padding-top: 16px} .w_0{ width: 0; height: 0; float: left; overflow: hidden; position: absolute} .img_1{ position: fixed; top: -400px; z-index: 100} .img_2{ position: absolute; top: 1000px; z-index: -100} @media only screen and (max-width : 1600px){ .prev{ left:32px; margin-left: 0} .next{ left: auto; right: 32px; margin-left: 0} .home .img_screen{ left:-490px; margin:0} } @media only screen and (max-width : 1640px){ .new_list{ height: 650px} .new_list .box{ transform: scale(0.8)} .evaluate_list{ height: 650px} .evaluate_list .box{ transform: scale(0.8)} } @media only screen and (max-width : 1340px){ .new_list{ height: 560px} .new_list .box{ transform: scale(0.6)} .new_list .t_1{ font-size: 24px} .new_list .t_2{ font-size: 22px; line-height: 26px} .new_list .t_3{ font-size: 18px} .evaluate_list{ height: 560px} .evaluate_list .box{ transform: scale(0.6)} .evaluate_list .t_1{ font-size: 22px; line-height: 26px; padding-top: 20px} .evaluate_list .t_2{ font-size: 20px; line-height: 26px; padding-top: 12px} } @media only screen and (max-width : 1160px){ .home .box{ height:480px} .home ul{ height:480px} .home li{ height:480px} .home .img{ width:1600px; height:480px; margin:0 0 0 -800px} .home .img img{ width:1600px; height:480px} .home .video{ width: 1600px; margin:0 0 0 -800px} .home .tit_box{ transform: scale(0.63); top: 182px; transform-origin: top left} .home .tit_box.top_228{ top: 144px} .home .tit_box.top_248{ top: 156px} .home .img_screen{ left:-290px; margin:0} .prev, .next{ top:217px} .product_list li{ height: 457px; margin:0 12px 16px 0} .product_list .img{ height: 457px} .product_list .img img{ width: 516px; height: 457px; margin-left: -258px} .product_list .t_box{ top: 26px} .product_list .t_1{ font-size: 16px; line-height: 22px} .product_list .t_2{ font-size: 28px; line-height: 32px; margin-top: 8px} .product_list .t_3{ width: 96px; font-size: 14px; line-height: 30px; margin:15px 0 0 -48px} } @media only screen and (max-width : 1080px){ .headNew .nav a{ padding:0 22px} } @media only screen and (max-width : 1000px){ .new_list{ height: 460px} .new_list .tit{ font-size: 24px; line-height: 30px; padding-top: 50px} .new_list .box{ transform: scale(0.5)} .evaluate_list{ height: 480px} .evaluate_list .box{ transform: scale(0.5)} .evaluate_list .t_2{ font-size: 22px; line-height: 28px; padding-top: 6px} } @media only screen and (min-width : 2600px){ .home{ width: 2560px; left: 50%; margin-left: -1280px} .product_list{ width: 2560px; left: 50%; margin-left: -1280px} }