@media (min-width: 768px) { .container { width: 100%; } } @media (min-width: 840px) { html, body { font-size: 16px; } .container { width: 98% !important; max-width: 840px; } .toggleShow{ width: 463px !important; } .toggleHide{ width: calc((100% - 463px - 20px)/2) !important; } .newSoluBox{ height: 288px !important; } .newsUl .li:last-child{ width: 100% !important; margin-top: 20px; height: auto !important; } .newsUl .li{ width: calc((100% - 40px)/2) !important; } .newsUl{ flex-wrap:wrap; } } @media (min-width: 980px) { html, body { font-size: 16px; } .container { width: 98% !important; max-width: 980px; } .toggleShow{ width: 540px !important; } .toggleHide{ width: calc((100% - 540px - 20px)/2) !important; } .newSoluBox{ height: 336px !important; } .newsUl .li:last-child{ width: 100% !important; margin-top: 20px; height: auto !important; } .newsUl .li{ width: calc((100% - 40px)/2) !important; } .newsUl{ flex-wrap:wrap; } } @media (min-width: 1140px) { .container { width: 98% !important; max-width: 1140px; } .toggleShow{ width: 628px !important; } .toggleHide{ width: calc((100% - 628px - 20px)/2) !important; } .newSoluBox{ height: 391px !important; } .newsUl .li:last-child{ width: 100% !important; margin-top: 20px; height: auto !important; } .newsUl .li{ width: calc((100% - 40px)/2) !important; } .newsUl{ flex-wrap:wrap; } .firstCate{ margin-left: 15px !important; } } @media (min-width: 1280px) { .container { width: 90% !important; max-width: 1200px; } html, body { font-size: 17px; } .toggleShow{ width: 607px !important; } .toggleHide{ width: calc((100% - 607px - 20px)/2) !important; } .newSoluBox{ height: 378px !important; } .newsUl .li{ width: calc((100% - 40px)/2) !important; } .newsUl .li:last-child{ width: 100% !important; margin-top: 20px; height: auto !important; } .newsUl{ flex-wrap:wrap; } .firstCate{ margin-left: 20px !important; } } @media (min-width: 1440px) { .container { width: 87.5% !important; max-width: 1440px; } html, body { font-size: 17px; } .toggleShow{ width: 708px !important; } .toggleHide{ width: calc((100% - 708px - 20px)/2) !important; } .newSoluBox{ height: 441px !important; } .newsUl .li:last-child{ width: calc((100% - 40px)/3) !important; margin-top: 0; height: auto !important; } .newsUl .li{ width: calc((100% - 40px)/3) !important; } .newsUl{ flex-wrap:inherit; } .firstCate{ margin-left: 20px !important; } } @media (min-width: 1500px) { .firstCate{ margin-left: 30px !important; } } @media (min-width: 1600px) { .container { width: 83.33% !important; max-width: 1600px; } html, body { font-size: 18px; } .toggleShow{ width: 900px !important; } .toggleHide{ width: calc((100% - 900px - 20px)/2) !important; } .newSoluBox{ height: 560px !important; } .newsUl .li:last-child{ width: calc((100% - 40px)/3) !important; margin-top: 0; height: auto !important; } .newsUl .li{ width: calc((100% - 40px)/3) !important; } .newsUl{ flex-wrap:inherit; } .firstCate{ margin-left: 30px !important; } } @media (min-width: 1920px) { .container { width: 1600px !important; max-width: 1600px; } html, body { font-size: 18px; } .toggleShow{ width: 900px !important; } .toggleHide{ width: calc((100% - 900px - 20px)/2) !important; } .newSoluBox{ height: 560px !important; } .newsUl .li:last-child{ width: calc((100% - 40px)/3) !important; margin-top: 0; height: auto !important; } .newsUl .li{ width: calc((100% - 40px)/3) !important; } .newsUl{ flex-wrap:inherit; } } @media screen and (min-width: 768px) { .container { padding-left: 0 !important; padding-right: 0 !important; } body { min-width: 1200px !important; background: #fff !important; } /* .header:after { position: absolute; width: 100%; height: 1px; background: #f4f4f4; bottom: 0; left: 0; right: 0; margin: auto; content: ''; } */ #webFun { display: flex; justify-content: space-between; align-items: center; } #webFun>.right { width: 700px; } #nav { font-size: 16px; } #nav .flex .pdlr20>a { display: inline-block; width: 100%; height: 100%; position: relative; } #nav .flex .pdlr20>a:hover::after { padding: 0 10px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); position: absolute; top: -10px; left: -10px; right: -10px; bottom: 0; margin: auto; content: ''; } .buyIcon { padding: 0 15px; cursor: pointer; background: #fff; border-radius: 60px; color: #DA2735; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* .buyIcon:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.5); } */ /* .buyIcon:after { position: absolute; background: url(../images/buy.png) no-repeat center; background-size: 26px auto; width: 26px; height: 26px; top: 0; left: 0; bottom: 0; content: ''; margin: auto; } */ /* .buy:hover .buyIcon, .buyIcon:hover { color: #FD1E00; } .buy:hover .buyIcon:after, .buyIcon:hover:after { background: url(../images/buy_act.png) no-repeat center; background-size: 26px auto; width: 26px; height: 26px; } .buy:hover .buyIcon:before, .buyIcon:hover:before { position: absolute; background: #FD1E00; height: 2px; left: 0; right: 0; bottom: 0; margin: auto; content: ''; animation: beLong .3s forwards; } @keyframes beLong { 0% { width: 0 } 100% { width: 100% } } */ .buyLayer, .searchLayer { display: none; position: absolute; background: #fff; top: 109px; left: 0; width: 100%; /* right:0; */ /* border-top: 1px solid #f6f6f6; */ z-index: 101; overflow: hidden; } .buyLayer .two .cb:nth-child(1) { background: #f4f4f4; } .buyLayer .cb { text-align: left; } .buyLayer .two .flex-1:first-child .box { width: 55% !important; } .buyLayer .two .flex-1:nth-child(2n-1) { justify-content: flex-end; } .buyLayer .two .cb:nth-child(2n) {} .buyLayer .one { width: 1200px; padding-left: 0px; padding-right: 0px; margin: auto; } .buyLayer .two .flex-1 .box { width: 600px; } .buyLayer .flex-1 .title { line-height: 40px; } .buyLayer .two .flex-1 .title { width: 100%; } .buyLayer .one .flex-1 .title { width: 50%; } .buyLayer2 { background: #fff; top: 129px !important; } .buyLayer .tIcon::after { position: absolute; top: 0; left: 0; bottom: 0; width: 40px; height: 40px; margin: auto; content: ''; } .icon_em::after { background: url(../images/em.png) no-repeat center; background-size: auto 20px; } .icon_bs::after { background: url(../images/bs.png) no-repeat center; background-size: auto 20px; } .buyLayer .content .box { border: 1px solid #c1c1c1; margin: 20px; padding-top: 15px; box-sizing: border-box; border-radius: 5px; font-size: 15px; cursor: pointer; } .buyLayer .phoneCall { width: 400px; height: 60px; border: 1px solid #c1c1c1; line-height: 60px; margin: 20px auto; border-radius: 5px; cursor: pointer; } .buyLayer .content .nBox { width: 20%; margin-bottom: 20px; } .buyLayer .content .box:hover, .phoneCall:hover, .buyLayer .content .tx:hover .box { background: #FD1E00; color: #fff; border: 1px solid #fff; transition: all .1s; } .buyLayer .content .box:hover a { color: #fff !important; } .buyLayer .content .box .boxIcon { position: relative; width: 80px; height: 80px; margin: auto; } .buyLayer .content .box .boxIcon:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; content: ''; } .buyLayer .content .box .icon_1:after { background: url(../images/buy_down_1_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box:hover .icon_1:after { background: url(../images/buy_down_1_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .icon_2:after { background: url(../images/buy_down_2_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box:hover .icon_2:after { background: url(../images/buy_down_2_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .icon_3:after { background: url(../images/buy_down_3_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box:hover .icon_3:after { background: url(../images/buy_down_3_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .icon_4:after { background: url(../images/buy_down_4_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box:hover .icon_4:after { background: url(../images/buy_down_4_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .icon_5:after { background: url(../images/buy_down_5_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box:hover .icon_5:after { background: url(../images/buy_down_5_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .solu_icon_1:after { background: url(../images/solu_1_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .tx:hover .solu_icon_1:after { background: url(../images/solu_1_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .solu_icon_2:after { background: url(../images/solu_2_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .tx:hover .solu_icon_2:after { background: url(../images/solu_2_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .solu_icon_3:after { background: url(../images/solu_3_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .tx:hover .solu_icon_3:after { background: url(../images/solu_3_act.png) no-repeat center; background-size: 70% auto; } /*.buyLayer .content .box .solu_icon_4:after{*/ /* background: url(../images/solu_4_nor.png) no-repeat center;*/ /* background-size: 70% auto;*/ /*}*/ /*.buyLayer .content .tx:hover .solu_icon_4:after{*/ /* background: url(../images/solu_4_act.png) no-repeat center;*/ /* background-size: 70% auto;*/ /*}*/ .buyLayer .content .box .solu_icon_4:after { background: url(../images/solu_5_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .tx:hover .solu_icon_4:after { background: url(../images/solu_5_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .solu_icon_5:after { background: url(../images/solu_6_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .tx:hover .solu_icon_5:after { background: url(../images/solu_6_act.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .box .solu_icon_6:after { background: url(../images/solu_7_nor.png) no-repeat center; background-size: 70% auto; } .buyLayer .content .tx:hover .solu_icon_6:after { background: url(../images/solu_7_act.png) no-repeat center; background-size: 70% auto; } .navUl .act>a:first-child { color: #FD1E00 !important; font-weight: bold; } .navUl .myLi:hover>a, .navUl .myLi .buyLayer .sec_con a:hover div { color: #FD1E00 !important; } .navUl .myLi .buyLayer .sec_con a div { border-bottom: 1px solid #f4f4f4; } .navUl .myLi .buyLayer .sec_con a:last-child div { border-bottom: none; } .navUl>div>a { line-height: 30px; padding-bottom: 10px; } .buyIcon { /*line-height: 109px;*/ line-height: 35px; } .buyIcon:hover { animation: sizeChange .3s linear infinite; } @keyframes sizeChange { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } /* .sec_con{ line-height:60px; text-align: left; background:#fff; box-shadow: 0 10px 10px rgba(0,0,0,.3); } */ .sec_con_53 { width: 210px; } .sec_con_21, .sec_con_46, .sec_con_34 { width: 170px !important; } .sec_con_34 { width: 130px; } .myLi .buyLayer .content .box { padding-bottom: 15px; } .thirdName { font-size: 12px; } .footer { position: relative; z-index: 1; background: #191919; } .footer .title { font-size: 16px; } /*搴曢儴start*/ .footer_bg { background: #22272D; } .footer .right .li{ padding-right:20px; } /*.footer_contact_bg{*/ /* width: 100%;*/ /* height:180px;*/ /* text-align: center;*/ /* color:#fff;*/ /* background: url(../images/home_bg_gdlj_nor.png) no-repeat center;*/ /* background-size: cover;*/ /* position: relative*/ /*}*/ .footer_contact_box { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; margin: auto; } .footer_contact_tips { font-size: 26px; } .footer_contact_btn { width: 180px; height: 40px; line-height: 40px; border: 1px solid #fff; margin: 30px auto 0 auto; } .footer_1st { border-bottom: 1px solid #393D42; box-sizing: border-box; } .footer_1st_icon { line-height: 19px; font-size: 13px; margin: 26px 0; color: #fff; padding-left: 55px; position: relative; } .footer_1st_icon:after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ''; width: 45px; height: 39px; } /*.footer_1st_icon_1:after{*/ /* background: url(../images/home_icon_gaoxjs_nor.png) no-repeat center;*/ /* background-size: 45px 39px;*/ /*}*/ .footer_2nd { padding: 60px 0 0 0; border-bottom: 1px solid #393D42; box-sizing: border-box; color: #fff; font-size: 14px; } .footer_2nd .left { width: 100%; } .footer_2nd .left .li { /*margin-right: 40px;*/ font-size: 15px; } .footer_2nd .left .li:last-child { margin-right: 0px; } .footer_2nd .left .li>div { font-size: 18px; } .footer_ul { color: #cccccc; font-size: 14px; line-height: 30px; margin-top: 15px } .footer_ul>li>a { color: #cccccc !important; font-size: 14px; } .contact_icon { width: 40px; height: 30px; position: relative; margin-bottom: 5px; } .contact_icon:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; content: ''; } /*.weibo_icon:after{*/ /* background: url(../images/home_icon_weibo_nor.png) no-repeat center;*/ /* background-size: 24px 20px;*/ /*}*/ /*.wechat_icon:after{*/ /* background: url(../images/home_icon_weixin_nor.png) no-repeat center;*/ /* background-size: 21px 23px;*/ /*}*/ /*.qq_icon:after{*/ /* background: url(../images/home_icon_qq_nor.png) no-repeat center;*/ /* background-size: 26px 21px;*/ /*}*/ .footer_2nd .right .left { line-height: 30px; font-size: 13px; color: #cccccc; } .footer_2nd .right .right { margin-left: 100px; text-align: center; font-size: 13px; line-height: 40px; color: #cccccc; } .footer_2nd .right .right img { width: 95px; height: 95px; vertical-align: middle; } .footer_2nd .right .right>.flex img { height: 40px; width: auto } .service_phone { width: 200px; background: #DA2836; height: 40px; border-radius: 3px; text-align: center; padding: 5px 0; box-sizing: border-box; margin-top: 10px; color: #fff; } .footer_3rd { padding: 20px 0; font-size: 14px; color: #fff; text-align: center; } .footer_3rd a { color: #fff !important; } .store a { color: #cccccc !important; } .store:last-child { margin-left: 20px; } /*搴曢儴end*/ /*鍙充晶瀵艰埅*/ .garyShow { position: absolute; top: 50%; transform: translateY(-50%); /* height: 200px; */ width: 30px; right: 100px; visibility: hidden; } .garyShow .garyBox:first-child img { transform: rotate(180deg); position: relative; /* right: 8px; */ } .right_nav { position: fixed; top: calc(50% - 100px); transform: translateY(-50%); right: 0; /*right: -100px;*/ width: 70px; z-index: 10087; } .right_nav .garyBox { background: #A1A1A1; /* border-top-left-radius: 5px; border-bottom-left-radius: 5px; */ overflow: hidden; cursor: pointer; } .right_nav .hBox { width: 50px; height: 50px; } .right_nav .garyBox .tx { color: #fff; font-size: 11px; } .garyBoxHide { width: 50px; height: 50px; /* border-top-left-radius: 60px !important; border-bottom-left-radius: 60px !important; */ /* border-top-right-radius: 60px !important; border-bottom-right-radius: 60px !important; */ /* position: relative; */ right: 100px; /* top: 180px; */ } .right_nav .bottom { height: 40px; border-top: 1px solid rgba(255, 255, 255, .12); } .right_nav .top .box { height: 70px; } .right_nav .top .box:hover, .garyShow .garyBox:hover, .right_nav .bottom:hover { background: #FD1E00; /* transition: all .3s; */ } .garyShow .hBox { border-bottom: 1px solid rgba(255, 255, 255, 0.25); } .garyShow .hBox:last-child { border-bottom: none; } .right_nav .top .box:last-child:hover { background: #333333; transition: all .3s; } .right_nav .rightCon .li { flex-direction: column; padding: 20px; /* height: 100%; */ /* line-height: 50px; */ /* border-right: 1px solid #f4f4f4 */ } .right_nav .rightCon .left { background: #f4f4f4; } .right_nav .rightCon .li:first-child, .right_nav .rightCon .li:last-child { border-right: none; } .rightConBox { display: none; } .right_nav .rightCon { position: absolute; /* top: 0; */ right: 70px; background: #fff; box-shadow: -12px 1px 30px 5px rgba(50, 51, 51, 0.23); /* border-top-left-radius: 10px; border-bottom-left-radius: 10px; */ } .right_nav .rightCon .lh25 { line-height: 25px; } #rightCon .rightContact { top: 0; width: 650px; height: 350px; } #rightCon .rightShare { top: 140px; /* height: 110px; */ background: #f4f4f4; width: 200px; } .arrowRadius { position: relative; padding-right: 40px; } .arrowRadius:after { position: absolute; background: url(../images/recom_nor.png) no-repeat center; background-size: cover; width: 30px; height: 30px; right: 0; top: 0; bottom: 0; margin: auto; content: ''; } .right_nav .rightCon .box:hover .arrowRadius:after { position: absolute; background: url(../images/right_goIcon.png) no-repeat center; background-size: cover; width: 30px; height: 30px; right: 0; top: 0; bottom: 0; margin: auto; content: ''; } .s_com { width: 30px; height: 44px; background: url(../images/s_com.png) no-repeat center; background-size: 30px; } .s_team { width: 30px; height: 44px; background: url(../images/s_team.png) no-repeat center; background-size: 30px; } .r_top_icon { position: relative; padding-left: 30px; } .r_top_icon::after { position: absolute; top: 0; bottom: 0; left: 0; content: ''; margin: auto; width: 30px; height: 30px; } .r_more::after { background: url(../images/r_more.png) no-repeat center; background-size: 20px; } .r_ques::after { background: url(../images/r_ques.png) no-repeat center; background-size: 20px; } .r_support::after { background: url(../images/r_bs.png) no-repeat center; background-size: 20px; } .r_service::after { background: url(../images/r_service.png) no-repeat center; background-size: 20px; } /*鍙充晶瀵艰埅*/ /*鍦ㄧ嚎瀹㈡湇*/ .serve { position: fixed; width: 100px; bottom: 20px; right: 0; box-shadow: 0px 8px 18px 0px rgba(253, 30, 0, 0.24); background: #FD1E00; height: 60px; line-height: 60px; z-index: 99; color: #fff; border-top-left-radius: 10px; border-bottom-left-radius: 10px; cursor: pointer; opacity: .6; } /*鍦ㄧ嚎瀹㈡湇*/ .moreCate { position: absolute; left: 119px; width: 200px; top: 0; line-height: 40px; padding: 10px 20px; color: #999999; font-size: 15px; background: #fff; display: none; } .sec_con_53 .moreBtn .moreCate { left: 209px; top: 300px; } .moreCate_2 { top: 120px; } .buyBox { background: #fff; top: 109px !important; } .serClose { width: 40px; height: 40px; color: #c1c1c1; cursor: pointer; background: url(../images/close.png) no-repeat center; background-size: 25px 25px; transition: all 1s; } .serClose:hover { transform: rotate(360deg); } .tops { display: none; width: 100%; box-sizing: border-box; margin: 0 40px; } .topSearch { line-height: 40px; border-bottom: 1px solid #c1c1c1; height: 40px; width: 100%; box-sizing: border-box; } .topSearch input { width: 100%; } .searchBtn { width: 60px; height: 40px; color: #FD1E00; cursor: pointer; line-height: 40px } .searchCon { /* position: absolute; */ padding: 20px; /* top: 40px; */ /* left: 0; */ /* right: 0; */ background: #fff; /* box-shadow: 0 10px 10px rgba(0, 0, 0, .3); */ z-index: 103; width: 700px; margin: auto; display: none; } .searchNav { line-height: 30px; cursor: pointer; color: #999999; font-size: 12px; font-weight: bold; display: none; } .TplFloatSet { position: fixed; bottom: 100px; right: 0; z-index: 9999; cursor: pointer; } .nSearchBox { width: 700px; height: 50px; border: 1px solid #cccccc; margin: 40px auto; border-radius: 10px; overflow: hidden; } .nSearchBox .sBtn { line-height: 50px; height: 50px; background: red; padding: 0 20px; color: #fff; background: #FD1E00; } .searchCon { max-height: 400px; overflow: auto } .header { z-index: 10086; position: fixed; top: 0; left: 0; width: 100%; } .language { position: absolute; right: 0; background: #fff; width: 110px; line-height: 40px; padding: 0 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); z-index: 102; display: none; } .lanArr::after { position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #ffffff; top: -10px; right: 4px; content: ''; margin: auto; } .bc_icon { width: 70px; height: 70px; margin: auto; } .bc_icon0 { background: url(../images/buy_down_1_nor.png) no-repeat center; background-size: 45px auto; } .bc_icon1 { background: url(../images/buy_down_2_nor.png) no-repeat center; background-size: 45px auto; } .bc_icon2 { background: url(../images/buy_down_3_nor.png) no-repeat center; background-size: 45px auto; } .language { position: absolute; left: 0; background: #fff; width: 110px; line-height: 40px; padding: 0 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); z-index: 102; display: none; } .lanArr::after { position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #ffffff; top: -10px; left: -30px; content: ''; margin: auto; } .sArr, .proArr { padding-right: 20px; } .sArr::after, .proArr:after { position: absolute; background: url(../images/solidArr.png) no-repeat center; width: 20px; height: 20px; background-size: 12px 12px; top: 0; bottom: 0; right: 0; margin: auto; content: ''; } .#showPro a:hover .box img{ transform: scale(1.1); } .cpBox:hover img{ /*display: none;*/ transform: scale(1.08); } .cpBox:hover .title{ color: #DA2735 !important; font-weight: bold; } .follow { cursor: pointer; } .second { border-right: 1px solid #333333; border-left: 1px solid #333333; } .followCode { position: absolute; width: 80px; height: 80px; margin-top: 15px; left: 0; right: 0; background: #fff; display: none; } .followCode::after { position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #fff; top: -10px; left: 18px; content: ''; margin: auto; } .secondCate { position: relative; } /* .secondCate:hover{ border-bottom: 2px solid #FD1E00; } */ .credLine::after { position: absolute; width: 100%; height: 3px; bottom: -1px; background: #FD1E00; left: 0; right: 0; margin: auto; content: ''; display: none; } .secondCate:hover .credLine::after { display: block; } #showLan, #showPro .proArr { height: 100%; line-height: 50px; cursor: pointer; } .bandBox { /* background: rgba(62, 62, 62, 1); */ background: #454649; position: absolute; top: 50px; left: 0; right: 0; margin: auto; } .bandBox .li { background: #fff; /* padding: 10px 30px; */ box-sizing: border-box; /* margin: 20px 10px; */ border-radius: 10px; color: #333333; margin-right: 60px; margin-bottom: 30px; width: calc((100% - 180px)/4); background: #F5F5F5; transition: all .3s; box-shadow: 0px 7px 10px 3px rgba(118, 118, 118, 0.12); } .bandBox .li:hover{ box-shadow: 0px 14px 21px 3px rgba(118, 118, 118, 0.2); } .bandBox .li:nth-child(4n){ margin-right: 0; } .bandBox .li .img{ height: 70px; transition: all .3s; overflow: hidden; width: 130px; } .bandBox .li .title{ font-size: 16px;font-weight: bold; } .bandBox .li:hover img{ transform: scale(1.1); } .bandBox .li:hover .title{ color: #DA2735; } .swiper-container { --swiper-theme-color: #FD1E00; --swiper-pagination-color: #FD1E00; /* 涓ょ閮藉彲浠 */ } .swiper-active-switch { background: #FD1E00; opacity: 1; } .banner { height: 600px; width: auto; } #banner .arrow-left { background-image: url(../images/ar.png); background-repeat: no-repeat; background-position: center; position: absolute; left: 50px; top: 50%; background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; z-index: 999; outline: none; opacity: .5; transition: all .3s; } #banner .arrow-right { background-image: url(../images/al.png); background-repeat: no-repeat; background-position: center; background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; position: absolute; right: 50px; top: 50%; z-index: 999; outline: none; opacity: .5; transition: all .3s; } .band-left { background-image: url(../images/b-ar.png?time=3); background-repeat: no-repeat; background-position: center; transform: rotate(180deg); /* position: absolute; */ left: 0; /* top: 50%; */ background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; z-index: 999; outline: none; opacity: .5; transition: all .3s; } .band-right { background-image: url(../images/b-ar.png?time=3); background-repeat: no-repeat; background-position: center; background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; /* position: absolute; */ right: 0; /* top: 50%; */ z-index: 999; outline: none; opacity: .5; transition: all .3s; } .bannerImg { width: 100%; height: 600px; } .band .li{ height:70px; overflow:hidden; } .band .li .img{ width:120px;overflow:hideden; } .earthBox{ height: 36vw;overflow: hidden; } .bgvid{ width: 100%;top:-150px; } .earthCon{ position: absolute;top: 0;left: 0;right: 0; } .earthCon .fatTitle{ background-image:-webkit-linear-gradient(top,#48cce8,#2f86e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:74px } .eLi{ font-size: 22px;color: #7BE6F4; } .pdt110{ padding-top: 110px; } }